Question

I am looping through some unordered lists and I’d like to get all of the descendants by using only the saved selectors (both of which are wrapped with jquery objects).

Here is my sample HTML:

<ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
</ul>

<ul>
    <li><a href="#">item 6</a></li>
    <li><a href="#">item 7</a></li>
    <li><a href="#">item 8</a></li>
    <li><a href="#">item 9</a></li>
    <li><a href="#">item 10</a></li>
</ul>

<ul>
    <li><a href="#">item 11</a></li>
    <li><a href="#">item 12</a></li>
    <li><a href="#">item 13</a></li>
    <li><a href="#">item 14</a></li>
    <li><a href="#">item 15</a></li>
</ul>

<ul>
    <li><a href="#">item 16</a></li>
    <li><a href="#">item 17</a></li>
    <li><a href="#">item 18</a></li>
    <li><a href="#">item 19</a></li>
    <li><a href="#">item 20</a></li>
</ul>

Here is my sample JS:

$(document).ready(function() {

    allUls   = $('ul');
    allAs    = allUls.find('a');

    // shouldn't this next line get all anchors within the second unordered list?
    console.log( allUls.eq(1).find(allAs) );

});

So there it is. I was expecting for an array of anchors that are descendants of the second list to be sent to the console. But that’s not the case.

You can see for yourself on my jsfiddle example: http://jsfiddle.net/u6uf4/

I’m also open to any “better” solutions you may have. Just keep in mind, I’d like to use only the saved selectors and would like to avoid creating any new selectors for this task.

Thank you for your time and effort for helping a fellow Jquery-er!

Answer 1

The option to pass a jQuery object to find() was only recently added in version 1.6. Your jsfiddle example uses version 1.5.2. Select the latest jQuery version on the left to make it work.