jQuery First Item for Each ID

Question

I have two seperate lists and each of the list should add class active. 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 #list1's first item getting the active class. How can i achive give the both list's first item active class.

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

Answer 1

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

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

Fiddle