Question

我有一个变量，我们称之为$ listObjects。它的数据如下....

<li>Data Here 1</li>
<li>Data Here 2</li>
<li>Data Here 3</li>
<li>Data Here 4</li>

我已经尝试了我能想到的每一种方式，并且无法找到如何获得list标签的nth-child。这可能吗？我基本上想在$ listObjects变量上使用nth-child（3n）。

如果无法实现上述方法，则会正好填充$ listObjects变量......

var $listObjects = $data.find('li[data-type=' + $filterType + ']');

是否可以将nth-child（3n）添加到该行？

Answer 1

使用filter：

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

所以这应该这样做：

$listObjects.filter(':nth-child(3n)')

如果您不需要$listObjects其他任何内容，那么您可以在原:nth-child中加入find：

$data.find('li[data-type=' + $filterType + ']:nth-child(3n)');

让我们澄清一下发生了什么。鉴于此HTML：

<ul>
    <li data-id="a">One</li>
    <li>Two</li>
    <li data-id="a">Three</li>
    <li data-id="a">Four</li>
    <li data-id="a">Five</li>
    <li data-id="a">Six</li>
    <li data-id="a">Seven</li>
</ul>

如果我们说$('li[data-id]')我们将获得一个，三个，四个，五个，六和七，原因很明显。

如果我们说$('li[data-id]').filter(':nth-child(3n)')，当您可能希望获得四时，我们会得到三和六七。这里发生了什么？ :nth-child选择器正在应用于<ul>的所有子项，而不仅仅是那些与[data-id]匹配的子项。从精细的手册：

针对每个元素测试提供的选择器;匹配选择器的所有元素都将包含在结果中。

所以这个行为与规范相匹配，即使它有点令人困惑，规范也可以更明确地说明事物的相互作用。

如果我们说$('li[data-id]:nth-child(3n)')那么我们得到（预期？）四和七，即$('li[data-id]')的每三个元素。

最后，我们可以这样说：

$.grep($('li[data-id]'), function(e, i) { return (i + 1) % 3 == 0 }));

请记住，nth-child是一个CSS选择器，因此从1开始，因此测试函数中的(i + 1)。这将再次为我们提供第三个元素，因此我们得到四个和七个。请注意$.grep为您提供了一个简单的DOM元素数组，因此如果您使用jQuery-ified版本，则需要将该数组包装在$()中。

演示：http://jsfiddle.net/fw4xr/

摘要：filter可能不是您想要的，但可能是:nth-child(3n)添加到原始选择器。或者，您可以使用$.grep来获取您感兴趣的$listObjects数组部分。filter的行为有点令人困惑。

获得一个充满li标签的变量的nth-child

1 个答案: