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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7309080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 23:41:18  来源:igfitidea点击:

How to select only one sibling with jQuery?

jquerysiblings

提问by Benjamin Crouzier

I have this code:

我有这个代码:

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

and

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

siblings(".bar")[0]doesn't work. (no alert box pops up, and no javascript error)

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

What is the proper way to select one sibling only ?

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

jsFiddle try

jsFiddle 尝试

Edit:I don't want to use prev()or next().

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

回答by James Allardice

You can use the eqmethod to reduce the matched set of elements to one at a specific index:

您可以使用该eq方法将匹配的一组元素在特定索引处减少为一个:

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

That will select the first element in the set. In your case, you could simply use prev, as the element you're looking for comes directly before the clicked element:

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

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

The problem with the array notation method you were using is that it returns the actual DOM node contained within the jQuery object, and that's not going to have a textmethod. eqis the equivalent jQuery method to do this.

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

回答by Skylar Anderson

You can also grab the first element out of a jQuery object using first:

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

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

回答by NimChimpsky

http://api.jquery.com/next/and/or http://api.jquery.com/prev/.

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

So it would be:

所以它会是:

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

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

回答by Nicola Peluchetti

You could use next() or prev();

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

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

fiddle here http://jsfiddle.net/fMT5x/2/

在这里小提琴http://jsfiddle.net/fMT5x/2/

回答by BlackDivine

You can either do:

你可以这样做:

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

BUT, you have to be sure that a previous item exists to .baz

但是,您必须确保 .baz 中存在先前的项目

OR (Better)

或更好)

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

OR (WORSE), just for reference, never use it :)

或(更糟),仅供参考,切勿使用:)

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

回答by Bharath Kumaar

Here is a link which is useful to learn about select a siblings element in Jquery.

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

How to select only one sibling with jQuery

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

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

you can also find an element using Jquery selector

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

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

For more information, refer this link next(), nextAll(), prev(), prevAll(), find() and siblings in JQuery

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