如何检测元素是否是给定类的第一个子元素

Question

我正在尝试用jQuery检测所选元素是否是给定类的第一个子元素。在这个例子中，你可以看到它是class.item的第一个子项，但选择器：first-of-type不起作用，因为它不是第一个div.

如何解决这个问题？

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>

Answer 1

我们可以使用is方法来检查两个元素是否相同。

因此，一个解决方案将有两个变量，一个是当前选择的元素，另一个是第一个元素。

let selectedItem = $('.list').find('.item.selected');
let firstElement = $('.list').find('.item:first');
console.log($(selectedItem).is(firstElement)); // this returns true, false

jsfiddle

Answer 2

使用jquery的.index()重载，您可以将其应用于预定义的集合(jquery对象(：

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

更新片段：

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>