jQuery选择器：兄弟、子级和父级

Question

我觉得我的标题几乎是模棱两可的，但事实上我甚至不确定如何澄清...因此有这个问题。

Html

<tr>  
  <div class="thisis(this)inmyexample"></div>
  <div class="stuff">
    <div class="foo"></div>
  </div>
</tr>

我的问题是关于选择器的区别。假设.stuff是$(this)的兄弟节点，如果我使用以下内容：

$(this).closest('tr').find('.stuff .foo')

现在，我意识到这样的编码方式并不高效，但这只是一个简单的例子。通过它，我将找到所有.stuff的子类中的.foo类。

如果我使用以下代码：

$(this).siblings('.stuff .foo')

我找不到任何东西。这可能是我对jQuery的经验不足所说的，但是为什么那种选择器（使用空格或两者都具有的选择器，例如'.stuff.foo'）不能与像.siblings这样的内容一起使用呢？我的期望是它会找到所有类为.stuff的同级元素，然后找到所有.stuff的子元素，其中包含类.foo。它不起作用是因为siblings/children/parent只寻找同级/父级/子级，而不会超出这个范围吗？

我知道我可以使用这个：

$(this).siblings('.stuff').children('.foo')

我已经实现了我的目标。只是好奇为什么我上面的选择器（如果这是它的正确称呼）不起作用。

提前感谢！

- Aarmora

---

@PranavRam 所以这是因为 '.stuff foo' 永远不会成为任何东西的兄弟，对吗？ - Aarmora

这是无效的HTML标记。 - A. Wolff

@A.Wolff 我觉得HTML并不是这个问题的关键，除了知道.stuff和$(this)是兄弟元素，而.foo是.stuff的子元素。我说的对吗？ - Aarmora

siblings() 搜索所有兄弟元素，查看它们是否与给定的选择器匹配，如果没有任何兄弟元素与 .stuff .foo 匹配，那么这就是非常简单的。例如，尝试使用 siblings('.stuff:has(.foo)')。 - adeneo

Answer 1

你已经自己回答了这个问题，使用 $(this).siblings('.stuff .foo') 无法找到任何内容，因为 .foo 不是 $(this) 的兄弟元素，它更像是一个“孙子元素”。使用这个选择器，它将查找具有 .stuff 父级的 .foo 兄弟元素，而你有 $(this) 和 .foo，后者是 .stuff 的子元素，不是 $(this) 的兄弟元素。

- Vlad

---

这正是我所想的。谢谢！ - Aarmora