jQuery obtener pariente hermano para este elemento solo

Question

No puedo encontrar la manera de escribir esto.

Ver mi estructura de marcado, que se repite varias veces en una página.

<div class="module">  
    <div class="archive-info"> 
     <span class="archive-meta"> 
      open 
     </span>       
    </div> 
    <div class="archive-meta-slide"> 
    </div>        
</div> 

Como se puede ver dentro de mi margen de beneficio, tengo un <span> que es mi $metaButton - cuando esto se hace clic, se ejecuta la animación en la div.archive-meta-slide - esto es bastante simple, pero estoy tratando de ejecutar la animación sólo en la corriente div.module que anima a todos los divs con la clase "archive-meta-slide", y estoy realmente luchando para animar sólo la corriente div.archive-meta-slide usando this

sería fácil si el div.archive-meta-slide estaba dentro de la matriz del div $metaButton , pero como está fuera de este div padre, puedo ' t obtener el atravesar a la derecha.

Ver mi guión

var $metaButton = $("span.archive-meta"), 
    $metaSlide = $(".archive-meta-slide"); 

$metaButton.toggle(
function() { 
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300); 
    $(this).parent().siblings().find(".archive-meta-slide").html("close"); 
}, 
function() { 
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300); 
    $(this).parent().siblings().find(".archive-meta-slide").html("open"); 
}); 

¿Alguien puede ayudar?

Gracias Josh

Answer 1

$(this).parent().siblings().find(".archive-meta-slide") 

Esto es realmente cerca. Esto realmente dice "encontrar elementos con la clase archive-meta-slide que son descendientes de hermanos del elemento principal de este elemento". Desea decir "buscar elementos con la clase archive-meta-slide que son hermanos del elemento principal de este elemento". Para ello, utiliza un selector en la llamada siblings:

$(this).parent().siblings(".archive-meta-slide") 

Tenga en cuenta que, si el margen de beneficio es siempre esta estructura, incluso se podría hacer $(this).parent().next().

Ver la API de jQuery:

• siblings
• find
• next

Answer 2

Uso

$(this).parent().parent().children('.archive-meta-slide') 

Esto es tan buena como la búsqueda childr en la parte superior del módulo div

$ (this) .parent(). progenitor()

será su superior

<div class="module"> 

Answer 3

Uso $(this).closest(".module") para encontrar el módulo de matriz de donde el haga clic sucede.

También es probable que desee utilizar una función de finalización para cambiar el texto después de hacer la animación.

Lo bueno de .closest() es que solo busca la cadena primaria tanto como sea necesario hasta que encuentra un objeto con la clase correcta. Esto es mucho menos frágil que usar un número específico de referencias .parent() si otra persona cambia un poco el diseño de HTML (agrega otro div o span o algo así en la cadena principal).

var $metaButton = $("span.archive-meta"); 

$metaButton.toggle(
    function() { 
     var $slide = $(this).closest(".module").find(".archive-meta-slide"); 
     $slide.animate({ height: "0" }, 300, function() { 
      $slide.html("close"); 
     }); 
    }, 
    function() { 
     var $slide = $(this).closest(".module").find(".archive-meta-slide"); 
     $slide.animate({ height: "43px" }, 300, function() { 
      $slide.html("open"); 
     }); 
    }, 
}); 

También puede secarlo un poco y hacer una función común:

function metaToggleCommon(obj, height, text) { 
    var $slide = $(obj).closest(".module").find(".archive-meta-slide"); 
    $slide.animate({ height: height}, 300, function() { 
     $slide.html(text); 
    }); 
} 

var $metaButton = $("span.archive-meta"); 
$metaButton.toggle(
    function() {metaToggleCommon(this, "0", "close")}, 
    function() {metaToggleCommon(this, "43px", "open")} 
); 

Answer 4

probar closest que le permitirá volver hasta llegar a los padres con el selector especificado.

$(this).closest(".module") 

Answer 5

Estás buscando ...

$(this).parent().next('.archive-meta-slide') 

Si cambia la estructura de #module, esto podría ser más robusto:

$(this).closest('#module').children('.archive-meta-slide') 

Answer 6

Uso

jQuery(this).closest('.prev-class-name').find('.classname').first()