Question

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

更新的标签：

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

为什么4号不起作用。在调用过滤器时，结果应该已经过滤，恕我直言。：|

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

jQuery中的链式选择器：在已经过滤的结果中应用选择器

2 个答案: