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

Question

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

我知道我可以得到父母 - ＆gt;得到给定班级的孩子并检查第一个孩子是否与元素相等，但这似乎不是我认为的正确方式..不存在＆＃34;更好＆＃34;溶液

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试的一个选项是检查#check的第一个.child元素集合中是否存在.parent

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

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

另一个是检查#check是否是.child父母的第一个#check孩子

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>

Answer 2

这是你在找什么？

编辑：添加了for each循环。

＆＃13;

＆＃13;

$(".parent").each(function(index) {
  alert($(this).find(".child").first().is($("#check")))
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;