jQuery: Wybieranie bezpośrednie rodzeństwo

Question

Załóżmy, że mam to HTML:.

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

chcę uzyskać tekst div myClass najbliższych na jednym kliknięciu, w kolejności, w jakiej się znajdujemy

to jest to, co mam:

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

wiem dodaje wszystkie div myClass; Zastanawiam się, czy jest to szybki sposób na zrobienie tego.

Dzięki.

Answer 1

Korzystanie .text(), .prevUntil() i .nextUntil()

Aby uzyskać tekst całej poprzedniej i następnej .MyClass elementu z kliknął .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(', ')); 
}); 

kombinacji prevUntil(), nextUntil() z 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

Można użyć .nextUntil() i .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); 

}); 

To będzie znaleźć wszystkie elementy (.MyClass w celu), które znajdują się w tej samej grupie .MyClass elementów oddzielonych przez .MyBorder elementów.

Demo nahttp://jsfiddle.net/gaby/kLzPs/1/

Answer 3

Jeśli chcąc uzyskać wszystkie rodzeństwo, które są w granicach następujące utwory:

$("#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/