Question

我知道这是一个非常奇怪的标题，但我会尽力解释下面的问题：

我的页面布局类似于以下内容：

.item
  pre
    code
  pre
    code
.item
.item
  pre
    code

我想选择code项（因为我想用'each()'循环遍历它们）。但是，我只想在每个'pre/code'块中选择第一个 .item组合。

我该怎么做？

首先我有$(".item pre code")，它会选择{em>所有的'pre/code'组合。我在jQuery文档中注意到有一个:first-child选择器。我试着将它贴在pre的末尾，但这不起作用。

Answer 1

您需要使用nth-child选择器。这将为每个父选择器选择与参数匹配的元素（基于1的索引）。（:first仅返回第一个pre; nth-child返回其父级的第一个孩子的所有pre：

$('.item pre:nth-child(1) code')

http://jsfiddle.net/syLMD/

请注意，这相当于.item pre:first-child code。据我所知，that works just fine。

好的，知道第一个pre可能不包含code ...您无法使用简单的选择器执行此操作。这需要更复杂的过滤：

$('.item')
    .data('found', false) // ensure that all item nodes have found = false
    .find('pre code') // find descendant code nodes
        .filter(function(){
            if ($.data(this.parentNode.parentNode, 'found')) { // if this item has already been found
                return false; // remove the code element from the selection
            } else {
                $.data(this.parentNode.parentNode, 'found', true) // mark the item as found
                return true; // keep the code element in the selection
            }
        })
            .each(function(){ // for each of these code elements
                $('#output').append(this.innerHTML); // or something else
            })
        .end() // back to the un-filtered selection of code elements
    .end() // back to the selection of div.item elements
    .data('found', false); // mark them as not found, for the next time

见example。请注意，这并不会有很好的表现......

如何使用jQuery选择列表中的第一个子项？

1 个答案: