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

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>

- eXe

---

如果你正在寻找一个单一的选择器来做到这一点，我认为并没有这样的选择器。 - Arun P Johny

var $check = $('#check'); console.log($check .is($check.parent().children('.child:first'))); // false - Arun P Johny

尝试使用 $('#check').index()。0 将是第一个位置。 - Huelfe

@ArunPJohny，这给了我true($check .is($check.parent().children('.child:first')))。 - RomanPerekhrest

我知道我可以通过获取具有给定类的父元素并检查第一个子元素是否等于该元素来实现，但我认为这不是正确的方法。为什么不呢？ - BoltClock

@BoltClock考虑了可能的速度问题（因为我在dragover事件中使用它，并且经常进行检查 - 但这是另一个故事），看起来很丑。 - eXe

Answer 1

您可以尝试的一种选择是检查.parent是否存在于第一个.child元素的集合中，其中包含#check

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

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

另一种方法是检查#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>

- Arun P Johny

---

我不知道is()也可以检查相等的元素。你的parent->child->first的简写对我来说现在是最好的解决方案，谢谢。 - eXe

那么你在这里要求OP尝试什么？请在您的代码中添加解释; 这几乎没有用，因为我必须仔细逐行解析您的示例并将其与问题进行比较以查看更改了什么。 - Martijn Pieters

Answer 2

您是在寻找这个吗？

编辑: 添加了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>

- NiZa

---

不行，因为如果您有多个此类父元素，并且＃check不在第一个这样的父元素中，那么检查将失败。 - BoltClock

哦，我正要回复，但你已经理解了 :) - NiZa

在我的情况下，我必须通过元素＃check开始检查，这就是为什么我不能使用这个片段 - 但它是正确的，并且有效。谢谢！ - eXe