javascript - 可以直接选择第一个后代吗？

Question

我目前正在使用 find()和 first()从每个 <div> 中选择第一个后代元素的方法包含 parent 的元素类(class)。但我觉得这很麻烦，因为 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

Javascript

$('.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 中显示的其他元素执行其他操作环形。谢谢。

Answer 1

如果你想遍历每个父元素中的第一个元素，你可以这样做:

$('.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
});