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 小提琴演示。

顺便说一下，JS Perf 对两种选择器方法的松散比较。

---

编辑添加了一个 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()