36

我有这个代码：

<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 试试

编辑：我不想使用prev()or next()。

4

6 回答 6

53

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

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

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

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

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

于 2011-09-05T13:58:39.297 回答
12

您还可以使用 first 从 jQuery 对象中获取第一个元素：

alert(siblings(".bar").first().text());
于 2011-09-05T13:59:54.663 回答
2

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

所以它会是：

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

于 2011-09-05T13:56:20.110 回答
2

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

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

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

于 2011-09-05T13:56:29.327 回答
1

你可以这样做：

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

但是，您必须确保 .baz 存在上一个项目

或更好）

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

或（更糟糕），仅供参考，切勿使用它:)

$(".baz").click(function() {
    var text = 0;
    $(this).siblings(".bar").each(function(){ text = $(this).text(); break; });
    alert("test: " + text);
});
于 2011-09-05T14:02:30.420 回答
1

这是一个链接，对于了解在 Jquery 中选择兄弟元素很有用。

如何使用 jQuery 只选择一个兄弟姐妹

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

您还可以使用 Jquery 选择器查找元素

$("h2").siblings('table').find('tr');

有关更多信息，请参阅此链接next()、nextAll()、prev()、prevAll()、find() 和 JQuery 中的兄弟姐妹

于 2015-05-04T12:58:44.630 回答