I have a web page. This web page has an area with some dynamically generated HTML. I want to get the first element (not all elements) within this area that has a custom attribute of a specific name. I then want to get that attribute value. I've setup a Fiddle. The code is like this:
<div id="myElement">
<div>
<div>
<ul>
<li></li>
<li><div data-custom-property="12345">
<p>
Some details
</p>
<div>
<div>
<div data-custom-property="xyzwt">
Stuff
</div>
</div>
</div>
</div></li>
<li></li>
</ul>
</div>
</div>
</div>
<button onclick="return getFirstElementWithProperty('data-custom-property');">
Get Element
</button>
Basically, I'm trying to get the first element within myElement that has the data-custom-property attribute. Everything I've seen (1, 2) involves looking for the value of an attribute. I want to search by name.
How do I find it?
If it will always be a div, and you know the element's ID:
$("#myElement div[data-custom-property]:first")
Otherwise, this will work, too, though it's best to be as specific as possible:
$("[data-custom-property]:first")
Related
I'm trying to access the elements that are appended by a library that I use in my code, but I can't access them. I have this line in my html.
<div class="bonds" id="original" style="display:block;"></div>
The library that I use will append some elements in here. So from the DOM inspector, it shows something like this.
<div class="bonds" id="original" style="display:block;">
<!-- append start -->
<div class="FL-main fieldsLinker">
<div class="FL-left">
<select></select>
<ul>
<li data-offset="0"></li>
<li data-offset="1"></li>
<li data-offset="2"></li>
</ul>
</div>
</div>
<!-- append ended -->
</div>
I'm trying to access the <ul></ul> element using the methods below but nothing works.
$('#original').children().children().children();
var original = $('#original').find('ul');
My goal is to append <span class="icon-close"></span> in each of <li></li> element when the page is loaded.
You could use JQuery find method to find the ul and loop over it's children.
Add your script at the end of all scripts. (library scripts).
$('#original').find('ul li').each(function(i) {
$(this).append('<span class="icon-close"></span>');
});
I'm trying to do something similar to How to hide an element, based on its text, with JavaScript? and Hiding a parent element using JS/JQuery based on the alt tag of a child element
but it's a bit more complicated than that. Here's the entire element (a list item containing lots of stuff) I want to hide:
<li>
<div class="wrapper">
<div class="fulllink" data-href="hideme/some/url" data-title="hideme - some more text">
<a href="/some/url" rel="stuff">
</div>
<div id="fullimage" class="theimage">
<img src="/some/url" title="hideme - some more text" alt="thisis/hideme text">
</div>
<div class="captionwrapper">
<div class="caption">
<p>
<a class="" title="" href="hideme/some/url">more text</a>
</p>
</div>
</div>
</div>
</li>
I want to hide this li element based on the specific content "hideme", which appears several times, but as you can see never on its own. It should be hidden as the page loads, so no user action required.
I've tried to come up with a solution based on similar questions on stackoverflow, but so far unsuccessfully.
You can use the html() function to get the html contents of each li and then search if it contains the desired text: "hideme".
$("li").each(function () {
if ($(this).html().indexOf('hideme') > -1) {
$(this).hide();
}
});
Demo
I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector
This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements
If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.
My s3slider is working perfectly, but I cannot get it to validate. I keep getting the error message "document type does not allow element "div" here; assume missing "li" start-tag [XHTML 1.0 Transitional]" and "end tag for "li" omitted, but OMITTAG NO was specified [XHTML 1.0 Transitional]".
Lots of people use this slider, so they just all have invalid code? The problem is the <div class="clear s3sliderImage"></div> nested inside of the <ul>. If I place it outside of the ul, the last image of the silder doesn't show - just like the author points out in the link below.
See s3slider code and instructions here.
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#">
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#">
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
The only valid child of a ul is an li. To get this to validate, move the clearer inside the last li, or outside the ul.
Better, set overflow: hidden on li.sliderImage and skip the clearing div altogether. In fact, removing it on the demo page doesn't seem to have any adverse effects, at least in Chrome. My guess is that it's a fix for old IE issues.