Question

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

Answer 2

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

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

请注意，以下不工作：

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

....因为它只会选择所有li元素中的第一个.parent后代。

Answer 3

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

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

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

请参阅此工作示例http://jsfiddle.net/9ej5H/

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

Answer 4

您始终可以使用index selector：$(".parent ul li:eq(0)")

或

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

只需注意：0是第一个。

可以直接选择后代吗？

4 个答案: