Цепные селекторы в JQuery: применить селектор в уже отфильтрованных результатов

Question

ИГНОРИРУЙТЕ: http://jsfiddle.net/gulcoza/9cVFT/1/

ОБНОВЛЕНО FIDDLE:http://jsfiddle.net/gulcoza/9cVFT/4/

Весь код в приведенном выше скрипку, но я объясню здесь также:

HTML

<ul> 
    <li id="e1">1</li> 
    <li id="e2" class="hidden">2</li> 
    <li id="e3">3</li> 
    <li id="e4" class="hidden">4</li> 
    <li id="e5">5</li> 
    <li id="e6">6</li> 
    <li id="e7">7</li> 
    <li id="e8">8</li> 
    <li id="e9">9</li> 
    <li id="e10">10</li> 
</ul> 

jQuery

console.log(
    $('ul li:visible:nth-child(4n)') 
); 

Мой ожидаемый результат:li#e6, li#e10 - почему? потому что я хочу, чтобы 4n-элементы были только из видимых.

Но

Фактический результат: я получаю 4n элемент из всех, только если они видны.

console.log(
    $('ul li:visible').filter(function(index) { 
     if ((index + 1) % 4 ==0) return true; 
    }) 
); 

Я заинтересован в любом приятное решение, чем следующему:

console.log(
    $('ul li:visible').filter(function(index) { 
     if ((index + 1) % 4 ==0) return true; 
    }) 
); 

ОБНОВЛЕНО FIDDLE:

http://jsfiddle.net/gulcoza/9cVFT/4/

Почему не номер 4 работы. На данный момент фильтр называется результатом, который должен быть уже отфильтрован, IMHO. : |

// 4 - could be a nice solution 
console.log(
    $('ul li:visible').filter(':nth-child(4n)') 
); 

Почему это не работает? В $('ul li:visible') момент должен быть доступен только видимый.

Answer 1

Это потому, что nth-child матчи элементы на основе их позиции в пределах списка родительского элемента дочерних элементов не на основе JQuery Collection (выбранных элементов), в этом вы должны использовать filter метод, filter метод также быстрее, чем цепочки цепочек.

Это как селекторы фильтровать элементы:

$('ul li:nth-child(4n):visible') 
//  ^   ^---- [li#e8] 
//  | 
//  | --- [li#e4.hidden, li#e8] 

$('ul li:visible:nth-child(4n)') 
//  ^   ^---- [li#e8] 
//  | 
//  | --- [li#e1, li#e3, li#e5, li#e6, li#e7, li#e8, li#e9, li#e10] 
//    [1,  3,  5,  6,  7,  8,  9,  10] 

Answer 2

Как вы теперь знаете - лучший способ сделать это ваш путь.

Причина, по которой это не работает, как вы ожидали, потому что псевдоселектор :nth-child выбирает элементы на основе их положения в родительском элементе.

Обратите внимание также, что строка селектора представляет собой строку из CSS селекторов и не связана с JavaScript.

Я нашел хороший ответ на другой вопрос о JS/CSS here

Я хотел бы предложить вам создать свой собственный метод, как это:

$.fn.nthChildren = function(n){ 
    this.filter(function(index) { 
     if ((index + 1) % n ==0) return true; 
    }) 
} 
console.log(
    $('ul li:visible').nthChildren(4); 
);