Question

I have the following DOM structure:

<div id="cont">
<ul>
    <li>
        <span class="c1"><span class="c2">...</span><span class="c3">...</span></span>
    </li>
    <li>
        <span class="c1"><span class="c2">...</span><span class="c3">...</span></span>
    </li>
    <li>
        <span class="c1"><span class="c2">...</span><span class="c3">...</span></span>
    </li>
    ...
    <li>
        <span class="c1"><span class="c2">...</span><span class="c3">...</span></span>
    </li>
</ul>
</div>

with the following jQuery:

$("#cont ul li").each(function (e) {
    $(this).bind("mousemove",function(d) {
        var ele = $(this + " .c2");
        var ele2 = $(this " .c3");
        //do stuff
    });
});

What I would like to do is access “c2” and “c3” elements relative to the current dom position. I would like the loop to select the following relative to the top of the DOM:

ele = $("#cont ul li span .c2");
ele = $("#cont ul li span .c3");
//Do Stuff
//Move to the next set of Li's
ele = $("#cont ul li span .c2");
ele = $("#cont ul li span .c3");
//Do Stuff
//Move to the next set of Li's
ele = $("#cont ul li span .c2");
ele = $("#cont ul li span .c3");
//Do Stuff
//Move to the next set of Li's
..

Answer 1

Use .find() to select descendants of the current matched element.

$("#cont ul li").each(function (e) {
    $(this).bind("mousemove",function(d) {
        var ele = $(this).find(".c2");
        var ele2 = $(this).find(".c3");
        //do stuff
    });
});