nearest()方法无法按预期工作

Question

我在下面有一个示例,我不知道为什么第一个例子(使用div's)没有得到文本,而第二个(使用span's)可以使用相同的JS代码实现它closest():

$('.class-1').closest('div').find('.class-2').text()

---

第一个片段(使用div's)无法使用closest()以下内容获取文本:

console.log( $('.class-1').closest('div').find('.class-2').text() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="class-1">Div 1 Content</div>
  <div class="class-2">Div 2 Content</div>
</div>

---

第二个片段(使用span's)获取文本closest():

console.log( $('.class-1').closest('div').find('.class-2').text() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="class-1">Div 1 Content</span>
  <br/>
  <span class="class-2">Div 2 Content</span>
</div>

我知道在这种情况下parents()/parent()/siblings()/nextAll()可以返回class-2文本的替代方法,但我只想知道这种行为会发生什么.

Answer 1

因为.closest()检查调用元素是否也适合选择器,在你的情况下.class-1也是一个div.

来自文档:

描述:对于集合中的每个元素,通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素.