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!