CODEWITHSUNDEEP
javascriptjquery
wuwutinh
wuwutinh

Reputation: 3

jQuery find inside selector

Looping through divs, i'm tring to write a selector to get the uls, and do something for each of them.

My HTML (simplified) looks like this:

<div class="foo">
    <ul>
    </ul>
    <ul>
    </ul>
    ...
</div>
<div class="foo">
    <ul>
    </ul>
    <ul>
    </ul>
    ...
</div>

...

after this:

variable=$(.foo);

that of course works fine, now i'm tring to do something like

for(var k=0;k<variable.length;k++){
variable[k].find('ul').doSomethingWithThese
}

but the selector is somehow wrong.
Even if my attempts were made on a simplified code, like the one in the example, the code is much more complex than this,
(inside my divs there is a lot more going on, and i'm building a loop with a map() function that for every div extracts something and concatenates with something else, and prints everything somewhere else...)
so please understand i can't just go like $(".foo > ul"), and even if i could i want to understand why my other attempts fail.

I tried every thinkable variant in the last 3 hours, including: using children() instead of find(), using get(0) insted of [0], using get(0) or [0] after ('ul') (to try at least to get the first ul),
using $variable, $.(variable), ($.('ul')), ($('ul')), using each() instead of a for loop, creating variables for everything, all the combinations possible of all of the above, google, stackoverflow, api.jquery.com...

than i tried even more simplified:

variable[0].children('ul')
variable[0].children('ul')[0]

and all the variants, and still no luck...

Upvotes: 0

Views: 196

Answers (6)

Lumi Lu
Lumi Lu

Reputation: 3305

HTML

<div class="foo">
    <ul class='myClass'>
        <li>list 1-1</li>
    </ul>
    <ul>
        <li>list 1-2</li>
    </ul>
    <ul>
        <li>list 1-3</li>
    </ul>
</div>
<div class="foo">
    <ul>
        <li>list 2-1</li>
    </ul>
    <ul class='myClass'>
        <li>list 2-2</li>
    </ul>
    <ul>
        <li>list 2-3</li>
    </ul>
</div>

JavaScript

$('.foo ul').each(function(){
    if ($(this).hasClass('myClass')){
        $(this).css('background-color', 'yellow');
    } 
})

Working Example

FIDDLE

Upvotes: 0

Nick Tomlin
Nick Tomlin

Reputation: 29261

jQuery returns an array like object, which contains DOM elements that match your selector (if any). In your case variable=$(.foo); Is equivalent to [<div class="foo"></div>, <div class="foo"></div> /* ... */]

Since your for loop is iterating over the DOM elements in that returned array. You can either re-wrap the element as a jQuery Object like so: 

for(var k=0;k<variable.length;k++){
   $(variable[k]).find('ul').doSomethingWithThese
}

Or use $.each to iterate over your collection:

$.each(variable, function () {
  $(this).find('ul').doSomethingWithThese
});

Upvotes: 0

Ragnar
Ragnar

Reputation: 4578

Try using .each() function

$('.foo').each(function(){
    var foo = $(this);
    var uls = foo.find('ul'); 
});

or 

$('.foo ul').each(function(){
   //code...
});

or 

$('.foo').each(function(){
    var foo = $(this);
    var uls = $('ul', foo); 
});

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42746

When you use variable[k] or variable.get(k) with a JQuery object it will give you the underlying DOM object and not a jQuery object. You can use the .each method to loop over each element and then wrap it back into a jQuery object or continue using your for loop and wrap.

.each

variable.each(function(index,element){
   var jqElement = jQuery(element); //or jQuery(this);
   var uls = jqElement.find("ul");
   uls.each(function(index2,ulElement){
      //do stuff
   });
});

For Loop

for(var k=0;k<variable.length;k++){
   var jqElement = jQuery(variable[k]);
   var uls = jqElement.find('ul');
   //etc
}

Of course you could just use a single selector to get the uls straight away

uls = jQuery(".foo ul");
uls.each(function(index,ulElement){
   var jqUL = jQuery(this);

   //if you need a reference to the parent .foo
   var parent = jqUL.closest(".foo");

   //etc do stuff
});

Upvotes: 0

unobf
unobf

Reputation: 7254

use variable.each http://api.jquery.com/jquery.each/ to iterate over the items returned by the first selector. You will also want to change .foo to '.foo'

Upvotes: 0

shikharsaxena30
shikharsaxena30

Reputation: 155

$('.foo ul').each(function(){
 //do whatever you want
})

For detailed use of the jQuery each() function, see here.

Upvotes: 2

Related Questions