jquery - 要素とその兄弟を選択します

Question

要素とその兄弟の切り替えは、次のように実行できます。

$(this).toggle();
$(this).prev().toggle();

それらを組み合わせてもうまくいきません:

$(this,$(this).prev()).toggle();

両方を同時に選択するにはどうすればよいですか？

Answer 1

jQuery 1.8以降の場合は、次を使用します.addBack()。

$(this).prev().addBack().toggle();

以前のバージョンのjQueryの場合は、非推奨の.andSelf()呼び出しを使用します（デモを参照）。

$(this).prev().andSelf().toggle();

Answer 2

前の兄弟と自分の場合:

$(this).prev().andSelf().toggle();

すべての兄弟と自分の場合:

$(this).parent().children().toggle();

Answer 3

ちなみに、この質問はすでにdrinchevによって回答されていますが、質問を読んだ後、私が行ったこの簡単な実験を貼り付けたいと思いました。これも機能します。とはいえ...それが起こったとき、それは私を驚かせました：

$('#recipient').click(
    function(){
        var pair = [this, this.previousElementSibling];
        $(pair).toggleClass('red green');
    });​

JSフィドルデモ。

ちなみに、JSPerfは2つのセレクターアプローチを大まかに比較しています。

---

IEを追加するために編集されました-（私が知る限り）フレンドリーなアップデートですが、現在、機能を検出するのではなく、すべてのブラウザーにIEを追加しています（また、私はついに青！=緑に気づきました）：

function pESibling(n){
    var nPS = n.previousSibling;
    if (!n || nPS === null){
        return false;
    }
    else if (nPS.nodeType == 1){
        return nPS;
    }
    else {
        return pESibling(nPS);
    }
}

var that = document.getElementById('recipient'),
    pair = [that, pESibling(that)];
$(pair).toggleClass('red green');
console.log(pair);
​

JSフィドルデモ

Answer 4

また動作します：

$(this).prev().add($(this)).toggle()