Question

我有两个单独的列表，每个列表都应该添加类激活。这是我的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/

Answer 1

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

first()

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

Answer 2

您可以使用jQuery first-child过滤器，例如：

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

Answer 3

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

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

Fiddle

Answer 4

java.lang.NumberFormatException: Invalid int: "1.0" at java.lang.Integer.invalidInt(Integer.java:138) at java.lang.Integer.parse(Integer.java:375) at java.lang.Integer.parseInt(Integer.java:366) at java.lang.Integer.parseInt(Integer.java:332) at com.example.tony.monthlyexpenses.adapter.ExpensesAdapter.getView(ExpensesAdapter.java:106) at android.widget.AbsListView.obtainView(AbsListView.java:2232)或:first查找匹配集中的第一个元素。所以，这是正常运作的。在您的情况下，您需要定位匹配父项中的所有第一个子元素。

改为使用.first()伪选择器：

:first-child

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

.active{color:red;}

Answer 5

: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>

{{1}}

Answer 6

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

说明：

$("[id^='list']")将返回ul s
然后在此列表中，您可以使用.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>

Answer 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>

Answer 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>

Answer 9

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

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

现在，我们只需执行$(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

Answer 10

使用此：

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

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

每个ID的jQuery First Item

10 个答案:

说明：