如何用jQuery只选择一个兄弟?

时间:2011-09-05 13:53:58

标签: jquery siblings

我有这段代码:

<ul>
  <li class="foo">foo text</li>
  <li class="foo2">foo2 text</li>
  <!-- more li here -->
  <li class="bar">bar text</li>
  <li class="bar2">bar2 text</li>
  <!-- more li here -->
  <li class="baz">clickme!</li>
</ul>

$(".baz").click(function() {
    alert("test: " + $(this).siblings(".bar")[0].text()); // Doesn't work
});

siblings(".bar")[0]不起作用。 (没有弹出警告框,也没有javascript错误)

仅选择一个兄弟姐妹的正确方法是什么?

jsFiddle try

修改:我不想使用prev()next()

6 个答案:

答案 0 :(得分:53)

您可以使用eq方法将匹配的元素集减少为特定索引处的元素集:

$(this).siblings(".bar").eq(0).text()

这将选择集合中的第一个元素。在您的情况下,您可以简单地使用prev,因为您要查找的元素直接位于所单击的元素之前:

$(this).prev(".bar").text()

您使用的数组表示法方法的问题是它返回jQuery对象中包含的实际DOM节点,并且不会有text方法。 eq是执行此操作的等效jQuery方法。

答案 1 :(得分:11)

您还可以先使用jQuery对象抓取第一个元素:

alert(siblings(".bar").first().text());

答案 2 :(得分:2)

http://api.jquery.com/next/和/或http://api.jquery.com/prev/

所以它会是:

$(this).prev().text());$(this).next().text());

答案 3 :(得分:2)

您可以使用next()或prev();

$(".baz").click(function() {
    alert("test: " + $(this).prev(".bar").text());
});

在这里摆弄http://jsfiddle.net/fMT5x/2/

答案 4 :(得分:1)

您可以这样做:

$(".baz").click(function() {
    alert("test: " + $(this).prev.html());
});

但是,您必须确保.baz

中存在先前的项目

或(更好)

$(".baz").click(function() {
    alert("test: " + $(this).siblings(".bar").eq(0).text());
});

OR(WORSE),仅供参考,绝不使用它:)

$(".baz").click(function() {
    var text = 0;
    $(this).siblings(".bar").each(function(){ text = $(this).text(); break; });
    alert("test: " + text);
});

答案 5 :(得分:1)

这是一个链接,有助于了解如何在Jquery中选择一个兄弟元素。

How to select only one sibling with jQuery

$("selector").nextAll(); 
$("selector").prev(); 

你也可以使用Jquery选择器

找到一个元素
$("h2").siblings('table').find('tr'); 

有关详细信息,请参阅此链接next(), nextAll(), prev(), prevAll(), find() and siblings in JQuery