javascript - 如何检查具有类的元素是否是该类的第一个子元素

Question

有没有办法直接检查一个元素，如果它是来自给定类的父元素的第一个元素？

我知道我可以获取父级 -> 获取给定类的子级并检查第一个子级是否与该元素相等，但这似乎不是我认为的正确方法.. 没有“更好”的解决方案吗？

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

Answer 1

您可以尝试的一个选项是检查 #check 是否出现在 .parents< 的第一个 .child 元素的集合中/p>

$('.parent').find('.child:first').is('#check');

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

另一种是检查#check是否是#check父类的第一个.child子

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>