JQuery first item for each id

Question

I have two separate lists, and each of them should add a class. Here is my 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");
});

As you can see only the first element # list1 receiving the active class. How can I get an active class with first class.

Here is the fiddle: https://jsfiddle.net/iCromwell/rkvzhebd/1/

Answer 1

Try looping over the parent, and then first select .item

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

Fiddle

Answer 2

You need to go through the list as you approach it, the class objects are added to one selection list, and first()sets the class only for the first:

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

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

Answer 3

jQuery first-child, :

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

Answer 4

:first .first() . , . .

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

Hide result

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

Hide result

Answer 6

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

:

• $("[id^='list']") ul s
• .find. , :first selector

$(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>

Hide result

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>

Hide result

Answer 8

first-child ul 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>

Hide result

Answer 9

javascript, :

ul $("[id^='list']"), , , jquery each(), , , , .

. active, $(this).find('item').first().addclass('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>

Hide result

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>

Hide result

Answer 10

:

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

Try it here: https://jsfiddle.net/mxautp3L/