How to detect whether the element is the first child with the given class

August 23, 2022

I am trying to detect if the selected element is the first child with the given class with jQuery. In the example, you can see that it is the first child with class .item but the selector :first-of-type doesn’t work for that because it is not the first div.

How can this be solved?

var selectedItem = $('.list').find('.item.selected');
var isFirst = selectedItem.is(':first-of-type');

console.log('Is item first? ' + isFirst);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="search"></div>
  <div class="item selected">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

>Solution :

Using jquery’s .index() overload you can apply it to a predefined collection (jquery object):

var isFirst = $(".list .item").index($('.list .item.selected')) == 0;

Updated snippet:

var items = $(".list .item");
var selectedItem = $('.list .item.selected');

var isFirst = items.index(selectedItem) == 0;
console.log(isFirst)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="search"></div>
  <div class="item selected">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>