jQuery $(this).prev(".class")无法正常工作。

Question

在这种简单的设置下，

<div class="parent">
   <div class="child">I'm spoiled</div>
</div>
<div class="aunt"></div>
<div class="uncle"></div>

<div class="parent">
   <div class="child">I'm spoiled</div>
</div>
<div class="aunt"></div>
<div class="uncle"></div>

当我检测到类名为“uncle”的单击事件时，我希望能够获取最近前面的“.parent”的兄弟元素。我应该能够这样做。

$( this ).prev( ".parent" ).children( ".child" ).text();

...但是这样返回一个空白。

如果我这样做

$( this ).prev().prev().children( ".child" ).text();

...这会返回预期结果：“我被宠坏了”

我是否忽略了使用 prev([selector]) 的某些限制？

[更新]

.prevAll() 返回所有先前的类，因此结果为

$( this ).prevAll( ".parent" ).children( ".child" ).text();

如果我点击第二个".uncle"，则会出现"I'm spoiledI'm spoiled"的结果，这不是我想要的。

我只需要最近的前一个。

- Pedro

Answer 1

来自jQuery文档:

.prev() 描述：获取匹配元素集合中每个元素的紧邻前一个兄弟元素（可选地经过选择器筛选）。

此外：

若要选择所有之前的兄弟元素，而不仅仅是紧邻的前一个兄弟元素，请使用.prevAll()方法。

所以，使用.prevAll()方法即可。 http://api.jquery.com/prev/

- George

---

更新了我的问题，以反映为什么我不能使用prevAll()。 - Pedro

使用$( this ).prevAll( ".parent:first" ).children( ".child" ).text(); - George

@George：这也是我建议的。 - Mottie

@George，谢谢，但是如果我点击第二个叔叔，这将提供相同的答案... - Pedro

你尝试过 $( this ).prevAll( ".parent:last" ).children( ".child" ).text(); 吗？我不确定 jQuery 解析 DOM 的顺序。 - George

Answer 2

那是因为prev的作用不是这样设计的。你试图按照.prevAll()的方式使用prev。

编辑：

根据您最新的要求，我认为以下代码可能会起作用：

$(this).prevUntil(".parent").first().prev().children( ".child" ).text()

- Joseph Marikle

---

我更新了我的问题，以展示为什么.prevAll()不能解决我的问题。 - Pedro

谢谢Joseph，这个解决方案可以解决问题，但不够顺畅 :) - Pedro

Answer 3

prev() 只返回第一个前面的元素。

尝试：

$( this ).prevAll( ".parent:first" ).children( ".child" ).text();

- panupan

Answer 4

这可能是更好的方法：

var this = $(this);
var.parent('.parent').prev().children('.children').text();

- Lukas