Как выбрать только одного брата с jQuery?

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Итак, это будет:

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

Ответ 4

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

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

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

Ответ 5

Вы можете:

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

НО, вы должны быть уверены, что предыдущий элемент существует для .baz

ИЛИ (лучше)

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

ИЛИ (WORSE), только для справки, никогда не используйте его:)

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

Ответ 6

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

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

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

вы также можете найти элемент с помощью селектора JQuery

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

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