每个 ID 的 jQuery 第一项答案

【问题标题】：jQuery First Item for Each ID每个 ID 的 jQuery 第一项
【发布时间】：2016-12-30 08:13:28
【问题描述】：

我有两个单独的列表，每个列表都应该添加活动类。这是我的 HTML：

<ul id="list1">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>
<ul id="list2">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>

CSS

.active {
  color: red;
}

JavaSript

$(document).ready(function () {
        $("[id^='list'] .item").first().addClass("active");
});

您可以看到只有#list1 的第一项获得活动类。我怎样才能获得两个列表的第一个项目活动类。

这里是小提琴：https://jsfiddle.net/iCromwell/rkvzhebd/1/

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

尝试循环遍历父级，然后首先定位.item

$(document).ready(function () {
    $("[id^='list']").each(function(){
       $(this).find('.item').first().addClass("active");
    });
});

Fiddle

【讨论】：

【解决方案2】：

你必须遍历列表，你接近它的方式，类对象被堆叠在一个选择列表中，first() 只将类设置为第一个：

   $(document).ready(function () {
        $("[id^='list']").each(function(){
            $(this).find('.item').first().addClass("active");
        })
    });

https://jsfiddle.net/rkvzhebd/4/

【讨论】：

【解决方案3】：

可以使用jQueryfirst-child过滤器，如：

$("ul li:first-child").addClass("active");

【讨论】：

我认为应该针对：$('ul[id^="list"] li:first-child').addClass('active');

【解决方案4】：

:first 或.first() 查找匹配集中的第一个元素。所以，这是正常运行的。而在您的情况下，您需要定位匹配父母中的所有第一个子元素。

改用:first-child 伪选择器：

$('[id^="list"] .item:first-child').addClass('active');

.active{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>
<ul id="list2">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>

【讨论】：

【解决方案5】：

first() 过滤您的结果并仅返回第一个元素 - 因此只选择了一个元素。使用:first-child伪选择器实现结果。

$(document).ready(function () {
        $("[id^='list'] .item:first-child").addClass("active");
});

$(document).ready(function () {
   $("[id^='list'] .item:first-child").addClass("active");
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>
<ul id="list2">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>

【讨论】：

【解决方案6】：

您可以使用$("[id^='list']").find('.item:first').addClass("active");

说明：

$("[id^='list']") 将返回uls 的列表
然后在此列表中，您可以使用.find 进行搜索。由于您只需要第一个元素，请添加 :first 选择器
为所有获取的元素添加类

$(document).ready(function() {
  $("[id^='list']").find('.item:first').addClass("active");
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="list1">
  <li class="item">Object 1</li>
  <li class="item">Object 2</li>
  <li class="item">Object 3</li>
</ul>
<ul id="list2">
  <li class="item">Object 1</li>
  <li class="item">Object 2</li>
  <li class="item">Object 3</li>
</ul>

【讨论】：

【解决方案7】：

考虑使用下面的代码：

$(document).ready(function () {
    $('[id^="list"]').each(function(){
        $(this).find('.item').first().addClass('active');
    });
});

.active {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>
<ul id="list2">
    <li class="item">Object 1</li>
    <li class="item">Object 2</li>
    <li class="item">Object 3</li>
</ul>

【讨论】：

【解决方案8】：

您可以在每个 ul 上使用 first-child 选择器而不是 id^=list

$("ul li:first-child").addClass("active");

.active{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li class="item">Object 1</li>
  <li class="item">Object 2</li>
  <li class="item">Object 3</li>
</ul>
<ul id="list2">
  <li class="item">Object 1</li>
  <li class="item">Object 2</li>
  <li class="item">Object 3</li>
</ul>

【讨论】：

【解决方案9】：

使用这个：

$(document).ready(function () {
        $("ul[id^='list'] :first-child").addClass("active");
});

在这里提琴： https://jsfiddle.net/mxautp3L/

【讨论】：

【解决方案10】：

如果你想用 javascript 来做，你可以这样做，

在这里，我们选择列表 ul 标记 $("[id^='list']")，它返回两个列表的数组，现在我们可以使用 jquery each() 标记迭代数组，该标记调用在参数中发送的函数，this 属性指向数组中的每一项。

现在，我们可以通过 $(this).find('item').first().addclass('active'); 添加类 .active

$(document).ready(function () {
    $('[id^="list"]').each(function(){
       $(this).find('.item').first().addClass('active');
    });
   });

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
        <li class="item">Object 1</li>
        <li class="item">Object 2</li>
        <li class="item">Object 3</li>
    </ul>
    <ul id="list2">
        <li class="item">Object 1</li>
        <li class="item">Object 2</li>
        <li class="item">Object 3</li>
    </ul>

link to fiddle

整个事情可以在没有javascript并且只使用css的情况下完成，如下所示

ul[id^='list'] :first-child {
   color: red;
}

    <ul id="list1">
        <li class="item">Object 1</li>
        <li class="item">Object 2</li>
        <li class="item">Object 3</li>
    </ul>
    <ul id="list2">
        <li class="item">Object 1</li>
        <li class="item">Object 2</li>
        <li class="item">Object 3</li>
    </ul>

link to fiddle

【讨论】：