jQuery найти внутри селектора

Question

Цитирование через divs, я пытаюсь написать селектор, чтобы получить uls, и сделать что-то для каждого из них.

Мой HTML (упрощенно) выглядит следующим образом:

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

... 

после этого:

variable=$(.foo); 

, что, конечно, прекрасно работает, теперь я Тринг, чтобы сделать что-то вроде

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

но селектор как-то не прав.
Даже если мои попытки были сделаны на упрощенном коде, например, в примере, код намного сложнее, чем этот,
(внутри моих divs происходит намного больше, и я строю цикл с функцией map(), которая для каждого div извлекает что-то и объединяет что-то еще, и печатает все где-то еще ...)
, поэтому, пожалуйста, поймите, я не могу просто пойти как $ (". foo> ul") и даже если бы я мог понять, почему мои другие попытки потерпят неудачу.

Я перепробовал все мыслимые вариант в течение последних 3-х часов, в том числе: использование детей() вместо того, чтобы искать(), с помощью GET (0) InstEd из [0], используя GET (0) или [0] после ('ul') (чтобы попытаться хотя бы получить первую ul),
, используя переменную $, $. (переменная), ($. ('ul')), ($ ('ul')), используя каждый() вместо цикла, создавая переменные для всех, всех комбинаций можно из всех указанных выше, Google, StackOverflow, api.jquery.com ...

чем я попытался еще более упрощено:

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

и все варианты, и до сих пор не повезло ...

Answer 1

При использовании variable[k] или variable.get(k) с JQuery объект это даст вам базовый объект DOM, а не объект JQuery. Вы можете использовать .each method для циклического перехода по каждому элементу, а затем снова вставить его в объект jQuery или продолжить использование цикла for и wrap.

.каждый

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 
} 

Конечно, вы можете использовать только один селектор, чтобы получить ULS сразу

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

Answer 2

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

Для подробной информации об использовании JQuery каждая функция(), см here.

Answer 3

Попробуйте использовать функцию .each()

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

или

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

или

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

Answer 4

использование variable.eachhttp://api.jquery.com/jquery.each/ для перебора элементов, возвращенных первого селектора. Вы также хотите изменить .foo к '.foo'

Answer 5

JQuery возвращает массив как объект, который содержит элементы DOM которые соответствуют вашему селектору (если есть). В вашем случае variable=$(.foo); эквивалентен [<div class="foo"></div>, <div class="foo"></div> /* ... */]

Так как ваш цикл итерации над DOM элементами в этом возвращаемом массиве. Вы можете либо повторно обернуть элемент как объект JQuery так:

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

Или использовать $.each перебрать коллекции:

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

Answer 6

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

Рабочий пример

FIDDLE