我有这段代码:
<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错误)
仅选择一个兄弟姐妹的正确方法是什么?
修改:我不想使用prev()
或next()
。
答案 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());
});
答案 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