Javascript jQuery中的链式选择器：在已筛选的结果中应用选择器

忽略：

更新的小提琴：

整个代码都在上面，但我也将在这里解释：

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>

我的预期结果：为什么？因为我只希望4n元素来自可见元素

但是

实际结果：只有当4n元素可见时，我才从all中获取它们

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

更新的小提琴：

为什么4号不起作用。调用筛选器时，应已筛选结果，IMHO.：|

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

---

为什么这样不行？在

$（'ul li:visible'）

时刻，只有可见的元素可用。

这是因为

第n个子元素

根据它们在父元素的子元素列表中的位置匹配元素，而不是基于jQuery集合（所选元素），在这种情况下，您必须使用

过滤器

方法，

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]

---

正如你现在知道的，最好的方法就是你自己的方式

这没有按预期工作的原因是，第n个子伪选择器正在根据元素在父元素中的位置选择元素

还要注意，选择器字符串是CSS选择器的字符串，与JavaScript无关

我在关于JS/CSS的另一个问题上找到了一个很好的答案

我建议您创建自己的方法，如下所示：

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

---

：第n个子元素

与父元素相关，而不是与所选内容相关。使用

filter

是合适的解决方案，尽管您可能希望将函数放在代码中的其他位置，以便在多次调用时可以重用它。我不能使用逗号或其他方式将它们分组。。在网络上找不到任何有用的内容解决方案有什么问题？我认为这是最好的解决办法。就像@zzzzBov说的，你应该把函数放在某个地方重用。@BillyMathews-我就是不能平静下来。。最重要的是，为什么第四条路不起作用？检查更新fiddle@alex.dominteno.4不起作用，因为

：n子元素仍然引用元素相对于其父元素的索引。请记住-
：第n个子项是CSS，而不是jQuery。我理解这一点，但我不理解为什么这不起作用
console.log（$（'ul-li:visible'）。filter（'：第n个子项（4n））检查更新question@alex.dominte因为ul的第n个孩子（4n）是第4个或第8个li-第4个是隐藏的，所以您得到的只是关于jquery css选择器之间差异的第8个liany文档/参考appreciated@alex.dominte不客气，
n个孩子
on，“
n个子项
不是跨浏览器的”怎么回事？。作为CSS选择器，它可能不起作用，但在jQuery中它总是起作用。
$.fn.nthChildren = function(n){
    this.filter(function(index) {
        if ((index + 1) % n ==0) return true;
    })
}
console.log(
    $('ul li:visible').nthChildren(4);
);