jQuery: Chọn anh chị em ngay lập tức

Question

Giả sử tôi có HTML này:.

<div id="Wrapper"> 

    <div class="MyClass">some text</div> 
    <div class="MyClass">some text</div> 

    <div class="MyBorder"></div> 

    <div class="MyClass">some text</div> 
    <div class="MyClass">some text</div> 
    <div class="MyClass">some text</div> 

    <div class="MyBorder"></div> 

    <div class="MyClass">some text</div> 
    <div class="MyClass">some text</div> 

</div> 

Tôi muốn nhận được văn bản của các div MyClass bên cạnh một trong những nhấp vào, theo thứ tự họ đang ở

Đây là những gì tôi có:

$('#Wrapper').find('.MyClass').each(function() { 
    AddressString = AddressString + "+" + $(this).text(); 
}); 

Tôi biết thêm TẤT CẢ các div MyClass; Tôi chỉ tự hỏi nếu có một cách nhanh chóng để làm điều đó.

Cảm ơn.

Answer 1

Sử dụng .text(), .prevUntil() và .nextUntil()

Để có được văn bản của tất cả các yếu tố .MyClass trước và tiếp theo từ nhấp .MyBorder:

$('#Wrapper').on('click', '.MyBorder', function() { 
    var AddressString = []; 
    $(this).nextUntil('.MyBorder').text(function(index, text) { 
     AddressString.push(text); 
    }); 

    $(this).prevUntil('.MyBorder').text(function(index, text) { 
     AddressString.push(text); 
    }); 
    console.log(AddressString.join(', ')); 
}); 

Sự kết hợp của prevUntil(), nextUntil() với siblings()

$('#Wrapper').on('click', '.MyClass' function() { 
    var AddressString = []; 
    $(this).siblings('.MyClass').prevUntil('.MyBorder').add($(this).prevUntil('.MyBorder')).text(function(index, text) { 
     AddressString.push(text); 
    }); 
    console.log(AddressString.join(', ')); 
}); 

Answer 2

Bạn có thể sử dụng .nextUntil() và .prevUntil()

$('#Wrapper').on('click','.MyClass', function(e){ 
    var self = $(this), 
     previous = self.prevUntil('.MyBorder', '.MyClass'), // find the previous ones 
     next = self.nextUntil('.MyBorder', '.MyClass'), // find the next ones 
     all = $().add(previous).add(self).add(next); // combine them in order 

    var AddressString = ''; 

    all.each(function(){ 
     AddressString += '+' + $(this).text(); 
    }); 

    alert(AddressString); 

}); 

này sẽ tìm thấy tất cả các yếu tố .MyClass (để) nằm trong cùng một nhóm .MyClass yếu tố tách bởi .MyBorder yếu tố.

Demo tạihttp://jsfiddle.net/gaby/kLzPs/1/

Answer 3

Nếu bạn đang muốn có được tất cả anh chị em rằng nằm trong biên giới, các công việc sau:

$("#Wrapper").on("click", ".MyClass", function(){ 
    var strings = []; 
    $(this) 
     .add($(this).prevUntil(".MyBorder")) 
     .add($(this).nextUntil(".MyBorder")) 
     .text(function(i,t){ 
      strings.push(t); 
     }); 
    alert(strings.join(', ')); 
});​ 

Fiddle: http://jsfiddle.net/Uw5uP/3/