Как выбрать только один брат с JQuery?

Question

У меня есть этот код:

<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().

Answer 1

Вы можете использовать метод eq, чтобы уменьшить соответствующий набор элементов до одного по определенному индексу:

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

Это выберет первый элемент в наборе. В вашем случае вы можете просто использовать prev, так как искомый элемент находится непосредственно перед выбранным элементом:

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

Проблема с методом записи массива, который вы использовали, заключается в том, что он возвращает фактический узел DOM, содержащийся в объекте jQuery, и у него не будет метода text. eq является эквивалентным методом jQuery для этого.

Answer 2

Вы также можете получить первый элемент из объекта jQuery, используя first:

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

Answer 3

Вы можете использовать next () или prev ();

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

скрипка здесь http://jsfiddle.net/fMT5x/2/

Answer 4

http://api.jquery.com/next/ и / или http://api.jquery.com/prev/.

Так было бы:

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

Answer 5

Вот ссылка, которая полезна, чтобы узнать о выборе элемента братьев и сестер в Jquery.

Как выбрать только одного брата с помощью jQuery

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

вы также можете найти элемент, используя селектор Jquery

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

Для получения дополнительной информации, обратитесь к этой ссылке next (), nextAll (), prev (), prevAll (), find () и родные братья в JQuery

Answer 6

Вы можете сделать:

$(".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);
});