Question

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 an id or class (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 1

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();
    });
})