Estoy tratando de detectar si el elemento seleccionado es el primer hijo con la clase dada con jQuery. En el ejemplo, puede ver que es el primer hijo con clase .item pero el selector :first-of-type no funciona para eso porque no es el primer div.
¿Cómo se puede solucionar esto?
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>Podemos usar is método para verificar si dos elementos son iguales o no.
entonces, una solución tendría dos variables, una es el elemento actualmente seleccionado y otra es el primer elemento.
let selectedItem = $('.list').find('.item.selected'); let firstElement = $('.list').find('.item:first'); console.log($(selectedItem).is(firstElement)); // this returns true, falseUsando la sobrecarga .index() de jquery, puede aplicarla a una colección predefinida (objeto jquery):
var isFirst = $(".list .item").index($('.list .item.selected')) == 0;Fragmento actualizado:
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>