jQuery: Selección de los hermanos inmediatos

Question

Supongamos que tengo este código 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> 

Quiero obtener el texto de los divs MiClase próximos a la que se hace clic, en el orden que están en

Esto es lo que tengo:

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

Sé que agrega TODOS los divs de MyClass; Me pregunto si hay una forma rápida de hacerlo.

Gracias.

Answer 1

Usando .text(), .prevUntil() y .nextUntil()

Para obtener el texto de todos .MyClass elemento anterior y siguiente del hecho clic .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(', ')); 
}); 

Combinación de prevUntil(), nextUntil() con 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

Puede utilizar .nextUntil() y .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); 

}); 

Esto encontrará todos los elementos (.MyClasscon el fin) que se encuentran en el mismo grupo de .MyClass elementos separados por los elementos .MyBorder.

demo enhttp://jsfiddle.net/gaby/kLzPs/1/

Answer 3

Si tienes intención de obtener todos los hermanos que están dentro de las fronteras, las siguientes obras:

$("#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(', ')); 
});​ 

violín: http://jsfiddle.net/Uw5uP/3/