获取充满 li 标签的变量的第 n 个孩子答案

【问题标题】：Getting nth-child of a variable full of li tags获取充满 li 标签的变量的第 n 个孩子
【发布时间】：2012-02-16 06:20:08
【问题描述】：

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

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

我已经尝试了所有我能想到的方法，但无法找到如何获取列表标签的第 n 个孩子。这可能吗？我基本上想在 $listObjects 变量上使用 nth-child(3n)。

如果上述方法不可行，则 $listObjects 变量会像这样填充...

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

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

【问题讨论】：

$listObjects是html字符串还是数组？
@AmarPalsapure 我猜它是一个 jQuery 对象
正确，它是一个 jQuery 对象。抱歉，应该解释得更好。

标签： jquery

【解决方案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)')，我们将得到 3 和 6，而您可能期望得到 4 和 >七。这里会发生什么？ :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)。这将再次给我们每三个元素，因此我们得到 Four>Four 和 Seven。请注意，$.grep 为您提供了一个普通的 DOM 元素数组，因此如果您使用 jQuery 化版本，您需要将该数组包装在 $() 中。

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

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

【讨论】：

嗯，使用 $listObjects.filter 似乎可行，但它几乎就像在 $data.find 之前选择原始的第 n 个子集 3。也就是说，这个 $data 中有 12 个列表对象。使用 $data.find 时，会出现 5 个。在 nth-child(3n) 上使用 addClass 时，它会将其添加到第一个、第三个和第五个。如果您想查看示例，请参阅此处joshdura.com/asteria/portfolio 单击类别链接。我正在使用 console.log 注销对象。
@Josh：这东西有点令人困惑，filter 可能不是您想要的。我已经添加了一些说明。