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

我目前正在使用

find（）

和

first（）

方法从包含

父类的每个
元素中选择第一个子元素。但我发现这相当麻烦，因为
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 li:first”）
选择器。但是，因为我是在一个循环中做这件事的，所以我不确定如何或是否可以做到，我希望得到一些建议。谢谢

澄清：

我需要在
每个
循环中对HTML中未显示的其他元素执行其他操作。谢谢。
看看这个

顺便说一句，你不需要用foreach。。。！将css修改直接应用于集合

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

请参考这个工作示例

请注意，Zee Tee answer也可以，但可读性较差。
如果要循环每个父元素中的第一个元素，可以执行以下操作：

$('.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
s上循环，另一个选项是：

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

如果您坚持同时使用外循环和
：首先
选择器，然后使用此选项：

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

请注意，以下操作不起作用：

…因为它只需在所有
.parent
元素中选择第一个
li
子体。
您始终可以使用：
$（“.parent ul li:eq（0）”

或

$（“.parent ul li”）.eq（0）

请注意：
0
是第一个元素。
我假设在循环中要执行的操作涉及相同的元素，但您明白了。我指的是html中未显示的其他元素。很抱歉我在我的帖子中更新了说明。是的，我理解第一个孩子，但是
不是孩子而是孙子。我需要
每个
循环来做其他事情。lwburk得到了答案。明白你的意思了，你需要另一个。家长div-那么他的答案更好！（：是的，太好了。这正是我想要的。谢谢！
：first
和
：first child
不是一回事。
：first child
选择所有作为其父元素的第一个子元素，而
：first
只将结果筛选为第一个匹配项。@nbrooks-我的帖子有什么让你相信我没有这样做吗“我不明白？如果是这样，我会说得更清楚。具体地说，请注意我的回答的后半部分，这意味着差异。好吧，你说指定的代码不起作用，但没有人提出，所以我认为你误读了。如果你使用
：first child
，同样的代码行就可以了。只是澄清一下。很好的回答。”答案：）代码
$（“.parent li:first”）
出现在OP的问题中。不过，您的评论可能对未来的访问者很有用，所以谢谢。
$('.parent').each(function() {
    $(this).find('li:first').css('color', 'red');
    // do other stuff within each loop
});

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