April 24, 2012
Javascript: get children by tag type
Question by 4herpsand7derpsago
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:
- How to obtain
myDiv
‘s single<ul>
child that has neither anid
orclass
(and to change the server-side code to produce one of these will be a nightmare); and - How to obtain each
<li>
‘s single<img>
child; same as above for getting the server to generates id/class attributes; and - How to obtain each
<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!
Answer by Chinmaya003
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();
});
})
Answer by Starx
You can do this like
$("ul:not([id], [class])").each(function() {
var img = $(this).find("img");
var p = $(this).find("p.imgDetail");
});