I have a situation where the server-side is producing resultant HTML of the form:
<div id="myDiv">
<ul>
<li class="imageElem">
<img src="..."/>
<div id="imgInfo">
<p class="imgDetail">
Image Title #1
</p>
</div>
</li>
<!-- Etc. for many images (1 <li> per <img>) -->
</ul>
</div>
I am trying to loop through this list and perform on-the-fly DOM manipulation with jQuery. I'm running into three bottlenecks:
myDiv
's single <ul>
child that has neither an id
or class
(and to change the server-side code to produce one of these will be a nightmare); and<li>
's single <img>
child; same as above for getting the server to generates id/class attributes; and<li>
's single <p>
child's text (e.g. "Image Title #1")I am trying the following (for each of those three issues respectively) to no avail:
var myDivUL = document.getElementById("myDiv").ul;
for(i = 0; i < myDivUL.length; i++)
{
var currImageElem = myDivUL[i].img;
var currPText = myDiv[i].div.p.text;
// ... rest of function omitted for brevity
}
What am I doing wrong here? What doe I need to change to get the three elements without having access to id/class attributes? Thanks in advance!
You can do something like this
var myDivUL = document.getElementById("myDiv").getElementsByTagName('ul')[0];
& so on, the key is to use getElementsByTagName() on any html element.
You can get all things like this:
$("#myDiv").find("ul:not([id],[class])").each(function()
{
$(this).find("li").each(function(){
var IMG = $(this).find("img:not([id],[class])");
var PText = $(this).find("p.imgDetail").text();
});
})
var ul = $('#myDiv ul').filter(function() {
return !$(this).attr('id') && !$(this).attr('class');
});
var img = $('li > img', ul); // will give li > img child of the "ul"
var pText = $('li p', ul).text();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With