web-dev-qa-db-ja.com

各兄弟要素を反復処理します

Context：特定のボタンのクリックに基づいてajaxクエリを実行するフォームとスクリプトを作成しています。同じクラスの要素を持つ複数のdivブロックがあり、ボタンがクリックされたdivブロックに基づいて、さまざまなフォームが処理されます。

プログラムの開始の一環として、私は明らかに単純なjQuery呼び出しから始めました。

特定のクラスにonclickイベントを追加してから、その要素の兄弟のCSS値を取得しようとしています。

エラー：TypeError: this.siblings is undefinedというエラーが表示されます。

質問： jQueryを使用して要素の兄弟を反復処理する適切な方法は何ですか？

私のコード：

HTML：

<a class="btn LiveStatsBtn"><span class="btn-label">Get Stats now</span> </a>

JavaScript：

$(document).ready (function()
{ 
    $('.LiveStatsBtn').click(function(){
        this.siblings.each( function () {
            var tx=this.css();
            alert(tx);
        });
    });
});
javascriptjqueryclassselector
15
Joel G Mathew

JQueryイベントハンドラーでは、thisはDOM要素を参照し、jQueryオブジェクトではありません。あなたはそれを1つに包む必要があります：

$(this).siblings().each(function() {
  // ...
});

また、「兄弟」は関数であるため、要素の兄弟をラップする新しいjQueryオブジェクトを取得するには、この関数を呼び出す必要があることに注意してください。

21
Pointy

siblingsは関数であるため、括弧が必要です。

$(document).ready (function()
{ 
    $('.LiveStatsBtn').click(function(){
        $(this).siblings().each( function () {
            var tx=$(this).css();
            alert(tx);
        });
    });
});

http://api.jquery.com/siblings/

1
Nicklas Nygren