使用jQuery引用与self相同的div中的锚标记

Question

我有一个jQuery函数，它将我页面上任何元素的click事件与类名'foo'绑定。

$('.foo').click(function () { etc.

虽然在这个函数中我想引用另一个元素，它存在于当前绑定的元素旁边 - 在同一个div中，但是类名为'bar'。

如何在同一个div内基于它的接近度来引用“bar”？

Answer 1

如果元素处于同一级别，则可以使用兄弟姐妹，即：

$(this).siblings(".bar")

如果层次结构不同，请尝试：

$(this).closest("div").find(".bar")

Answer 2

像这样，如果bar是foo之后的下一个兄弟：

<div>
   <div class="foo"></div>
   <div class="bar"></div>
</div>

$('.foo').click(function () { 
  var bar = $(this).next('.bar');
});

就像这样，如果bar是foo之前的兄弟姐妹：

<div>
   <div class="bar"></div>
   <div class="foo"></div>
</div>

$('.foo').click(function () { 
  var bar = $(this).prev('.bar');
});

如果bar可以是foo的上一个或下一个兄弟，那就像这样：

$('.foo').click(function () { 
  var bar = $(this).siblings('.bar');
});

OR

$('.foo').click(function () { 
  var bar = $('bar', $(this).parent());
});

Answer 3

$('.bar', this)＆lt; - 就像那样（如果bar在foo内）

$(this).closest('.bar')＆lt; - 就像那样（如果bar靠近foo）