如何用jQuery检测选中元素是否为指定类的首个子元素

因为:first-of-type是基于标签类型选择首个元素，而非类，所以无法直接用来匹配.item类的首个元素。以下是几种可行的解决方案：

方法1：直接匹配父容器下的首个.item元素 #

通过.list .item:first精准定位父容器内第一个拥有.item类的元素，再用is()判断选中元素是否匹配：

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

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

方法2：检查选中元素之前是否存在其他.item元素 #

利用prevAll('.item')获取选中元素之前所有同类型类的元素，若结果长度为0，则说明它是首个.item：

var selectedItem = $('.list').find('.item.selected');
var isFirst = selectedItem.prevAll('.item').length === 0;

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

方法3：对比选中元素与首个.item元素 #

先获取父容器内所有.item元素的第一个，再通过is()判断是否与选中元素为同一个：

var selectedItem = $('.list').find('.item.selected');
var firstItem = $('.list .item').eq(0);
var isFirst = selectedItem.is(firstItem);

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

对应的HTML结构（与原示例一致）：

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

原理说明 #

• :first选择器会匹配选中集合中的第一个元素，结合类选择器就能精准定位到父容器内首个.item。
• prevAll('.item')会遍历选中元素之前的所有同级元素，筛选出带.item类的，若没有则说明当前元素是第一个。
• eq(0)直接获取.item集合中的第一个元素，通过is()判断元素是否一致。

内容的提问来源于stack exchange，提问作者Earlgray