jQuery: 查找具有特定类的前一个元素

Question

我有一个非常简单的问题。

如何找到另一个元素的第一个前面的元素？ 我尝试了下面的代码，但没有成功。

HTML：

<div class = "A">HERE</div>

<div class="B">
    <div class="C" style="width:50px;height:50px;background-color:#000000;"></div>
</div>

JS：

$('.C').click(function() {

        alert($(this).closest('.A').html());

});

Fiddle：http://jsfiddle.net/Mcujp/4/

- Peter Lur

---

尝试使用 prev('.A') 或 prevAll('.A')。 - sites

两个都不起作用。请查看fiddle。 - Peter Lur

如果您查看jQuery文档，您会发现.closest()仅返回祖先元素（或无），而不是祖先的同级元素。同样，.prev()仅返回前一个同级元素，它不会在源代码中向上搜索匹配的元素。 - nnnnnn

谢谢nnnnnn。这就是为什么它没有正常工作的原因。 - Peter Lur

Answer 1

如果您想获取前一个兄弟元素，请使用.prev()。

如果您要获取父级元素的兄弟元素（例如您的示例），请使用.parent().prev()。

- George Cummins

---

.prev() 只匹配兄弟元素。由于 <div class="A"> 不是 <div class="C"> 的兄弟元素，因此它不会被匹配。 - George Cummins

使用jQuery在DOM中查找元素确实是一个因情况而异的情况。你必须检查你的HTML结构有多么规范。 - Peter Lur

当您尝试基于元素的相对位置查找元素时，这是正确的。如果距离不是问题，则结构并不重要，因为您可以使用选择器，例如 $('.A') 来匹配元素。 - George Cummins

谢谢 George！很有道理！ - Peter Lur

结合使用.closest()和.find()方法可以很好地适应不同的HTML结构，只要你关心的两个元素通过共同的祖先容器相关联即可。 - nnnnnn

Answer 2

试试这个：

$('.C').click(function() {

        alert($(this).parent().prev('.A').html());

});

- cortex

Answer 3

$('.C').click(function() {
   alert($(this).closest('.B').prev('.A').html());
});

- hnafar

---

我本来想复制第一个，看起来我是在它后面复制的。谢谢。 - hnafar

为什么 $(this).closest('.B').prev('.A').html() 能够工作，但是只有 $(this).closest('.A').html() 就不行呢？ - Peter Lur

$.closest() 查找当前元素及其祖先，找到与选择器匹配的第一个元素。$('.a') 不是 $('.C') 的祖先，因此 $(this).closest('.A') 将不会选择它。 - hnafar

Answer 4

如果您想要定位最接近顶级父元素的子元素，可以按照以下定义进行操作。

假设您有一个类似于以下的HTML代码。

<div class="top-parent">
  <div class="parent">
    <button class="add-button">Child of 1st Parent DIV</button>
  </div>
  <div class="parent">
    <button class="add-button">Child of 2nd Parent DIV</button>
  </div>
</div>
<script>
$(document).on('click','.add-button',function(){
   $(this).parents('.parent').prev().closest('.parent').find('.add-button').text('im clicked by one of the button next to my parent')
   $(this).parents('.parent').remove();
})
</script>

同样地，如果你想要定位祖父级别的下一个父容器的子元素，只需将.prev()更改为.next()

希望我已经简单明了地定义了它 :)

- Muhammad Safeeullah Sarhandi