如何检查 class 的元素是否是 class 的第一个子元素

How to check if element with class is first-child of that class

有没有办法直接检查一个元素,如果它是来自给定 class 的父元素的第一个元素?

我知道我可以获取父级 -> 使用给定的 class 获取子级并检查第一个子级是否与该元素相等,但这似乎不是我认为的正确方法.. 没有"better"解决方案?

// is obviously not first-child
console.log($('#check').is(':first-child'));       // false
console.log($('#check').is('.child:first-child')); // false
console.log($('#check').is('.child:first'));       // false

// want to get true for "element is first child with this class"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<div class="parent">
    <div class="something"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>
<div class="parent">
 <div class="something"></div>
 <div class="child" id="check"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

这是您要找的吗?

编辑:添加了for each循环。

$(".parent").each(function(index) {
  alert($(this).find(".child").first().is($("#check")))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="something"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="something"></div>
  <div class="child" id="check"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

您可以尝试的一个选项是检查 #check 是否存在于 .parents

的前 .child 个元素的集合中
$('.parent').find('.child:first').is('#check');

在这里我们找到 .parent 的所有第一个 .child 后代然后检查 #checks 是否是其中之一

另一个是检查#check是否是#checks parent中的第一个.child child like

var $check = $('#check');
$check.is($check.parent().children('.child:first'))

所以

// is obviously not first-child
snippet.log($('#check').is(':first-child')); // false
snippet.log($('#check').is('.child:first-child')); // false
snippet.log($('#check').is('.child:first')); // false



var $check = $('#check');
snippet.log($check.is($check.parent().children('.child:first')));

snippet.log($('.parent').find('.child:first').is('#check')); // false
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<div class="parent">
  <div class="something"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="something"></div>
  <div class="child" id="check"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>