2012-04-22 32 views
14

Toggling một yếu tố và anh chị em của nó có thể được thực hiện như sau:Chọn một phần tử và anh chị em của nó

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

Kết hợp họ không làm việc:

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

Làm thế nào cả hai có thể được lựa chọn cùng một lúc ?

Trả lời

6

Ngẫu nhiên, trong khi câu hỏi này đã được answered by drinchev , Tôi nghĩ tôi sẽ dán thử nghiệm nhanh này mà tôi vừa làm, sau khi đọc câu hỏi, cũng có tác dụng. Mặc dù ... nó làm tôi ngạc nhiên khi nó đã làm:

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

JS Fiddle demo.

Ngẫu nhiên, một JS Perf loose comparison of the two selector approaches.


Sửa để thêm một tức là-(cho đến nay như tôi biết) cập nhật -friendly, mặc dù tôi đang saddling tất cả các trình duyệt với nó, chứ không phải là tính năng phát hiện (còn, cuối cùng tôi nhận ra rằng màu xanh ! = màu xanh lá cây):

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 Fiddle demo

+0

Niềm vui của web! Không, nghiêm túc ..! =) Để cắt ngắn một câu chuyện dài [IE <9 không 'làm' 'previousElementSibling'] (http://www.quirksmode.org/dom/w3c_core.html#t84). Tuy nhiên, có cách tiếp cận cũ, và luôn luôn thời trang, 'if'. =) –

+0

Tôi đã mắc sai lầm ngu ngốc khi kiểm tra giải pháp của bạn. Trong khi, không, 'previousElementSibling' sẽ không thực hiện thủ thuật, chỉ cần sử dụng một mảng sẽ ...' $ ([$ (this), $ (this.prev())]) 'hiện nó! – Gary

+2

Có một cách dễ dàng hơn $ (this) .prev(). VàSelf(). Toggle(); –

30

Đối với jQuery 1.8+, sử dụng .addBack():

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

Đối với phiên bản jQuery trước đó, sử dụng các phản .andSelf() cuộc gọi (xem demo):

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

Các * Demo * là sai. Câu trả lời là sử dụng 'prev()' trong khi bản demo đang sử dụng 'parent()', đó không phải là những gì OP muốn. – Pang

6

cho anh chị em trước và tự:

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

cho tất cả các anh chị em và tự:

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

Cũng làm việc:

$(this).prev().add($(this)).toggle() 
Các vấn đề liên quan