可以直接选择第一个后代

Can first descendent be selected directly?

本文关键字：第一个 后代 选择      更新时间：2023-09-26

我目前正在使用find()和first()方法从包含parent类的每个<div>元素中选择第一个后代元素。但我发现这很麻烦，因为find()方法会在选择第一个元素之前生成一组匹配的元素。以下是我的代码的骨架：

.HTML 

<div class=parent>
 <ul>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
 </ul>
</div>
<div class=parent>
 <ul>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
 </ul>
</div>
<div class=non-parent>
 <ul>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
 </ul>
</div>
<div class=parent>
 <ul>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
  <li>random characters</li>
 </ul>
</div>
// .....the list continues

爪哇语

$('.parent').each(function() {
 $(this).find('ul li').first().css('color', 'red');
// do other stuff (on other elements) within each loop
});

我见过有人使用$(".parent li:first")选择器。但是，因为我是在循环中做的，所以我不确定如何或是否可以做到这一点，并希望得到一些建议。谢谢。

澄清：

我需要在循环

each HTML 中未显示的其他元素上做其他事情。谢谢。

如果要遍历每个父元素中的第一个元素，可以执行以下操作：

$('.parent ul li:first-child').each(function() {
    $(this).css('color', 'red');
    // do other stuff within each loop
});

不过，这不必在循环中完成，因为 .css() 方法将对所有匹配的元素进行操作。这也有效：

$('.parent ul li:first-child').css('color', 'red');

这将改变所有这些。

如果要遍历所有li，另一个选项是：

$('.parent ul li').each(function() {
    if($(this).is(":first-child"))
        $(this).css('color', 'red');
    // do other stuff within each loop
});

更新：如果要遍历每个父项而不是随后执行其他检查，则以下内容将很有用：

$('.parent').each(function() {
    // I assume that even if other uls are in parent, the ul you target is first
    $(this).find("ul li:first-child").first().css('color', 'red');
    // do other stuff within each loop
});

如果您坚持同时使用外部循环和:first选择器，请使用以下命令：

$('.parent').each(function() {
    $(this).find('li:first').css('color', 'red');
    // do other stuff within each loop
});

请注意，以下内容将不起作用：

$('.parent li:first').css('color', 'red');

....因为它将简单地选择所有.parent元素中的第一个li后代。

看看这个 http://api.jquery.com/first-child-selector/

顺便说一下，你不需要前锋...！将您的 css 修改直接应用于集合！

$('.parent ul li:first-child').css('color', 'red');

请参考这个工作示例 http://jsfiddle.net/9ej5H/

请注意，Zee Tee 答案也可以，但可读性较差。

您始终可以使用索引选择器：$(".parent ul li:eq(0)")

或

$(".parent ul li").eq(0)

请注意：0是第一个。

相关文章：