web-dev-qa-db-ja.com

jQueryで兄弟を1つだけ選択する方法は？

私はこのコードを持っています：

_<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エラーもありません）

1人の兄弟だけを選択する適切な方法は何ですか？

jsFiddle try

編集：prev()またはnext()を使用したくありません。

jquerysiblings
35
Benjamin Crouzier

eq メソッドを使用して、一致する要素のセットを特定のインデックスの要素に減らすことができます。

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

これにより、セットの最初の要素が選択されます。あなたの場合、あなたが探している要素はクリックされた要素の直前に来るので、単に prev を使用することができます：

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

使用していた配列表記法の問題は、jQueryオブジェクト内に含まれる実際のDOMノードを返し、textメソッドを持たないことです。 eqは、これを行うための同等のjQueryメソッドです。

53
James Allardice

Firstを使用して、jQueryオブジェクトから最初の要素を取得することもできます。

alert(siblings(".bar").first().text());
11
Skylar Anderson

http://api.jquery.com/next/ および/または http://api.jquery.com/prev/ .

だから：

$(this).prev().text());または$(this).next().text());

2
NimChimpsky

Next（）またはprev（）;を使用できます。

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

ここでフィドル http://jsfiddle.net/fMT5x/2/

2
Nicola Peluchetti

次のいずれかを実行できます。

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

Jqueryで兄弟要素を選択する方法を学ぶのに役立つリンクを次に示します。

jQueryで兄弟を1つだけ選択する方法

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

jqueryセレクターを使用して要素を見つけることもできます

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

詳細については、このリンクを参照してください next（）、nextAll（）、prev（）、prevAll（）、find（）およびJQueryの兄弟

1
Bharath Kumaar