1

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

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 中未显示的其他元素执行其他操作。谢谢。

4

4 回答 4

2

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

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

这将改变所有这些。

如果要遍历所有lis，另一个选择是：

$('.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
});
于 2012-06-30T03:13:48.127 回答
1

如果你坚持使用外循环和: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元素的第一个后代。

于 2012-06-30T03:19:26.677 回答
0

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

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

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

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

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

于 2012-06-30T03:13:01.013 回答
0

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

或者

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

请注意：0是第一个。

于 2012-06-30T03:21:32.603 回答