jQuery ottiene parent parent per questo solo elemento

Question

Non riesco a capire come scriverlo.

Vedere la mia struttura di markup, che viene ripetuta più volte su una pagina.

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

Come si può vedere dentro la mia mark-up, ho un <span> che è il mio $metaButton - quando questo viene cliccato, viene eseguito l'animazione sul div.archive-meta-slide - questo è abbastanza semplice, ma sto cercando di eseguire l'animazione solo sulla corrente div.module che anima tutti i div con la classe "archive-meta-slide", e sto davvero fatica ad animare solo la corrente div.archive-meta-slide utilizzando this

sarebbe facile se il div.archive-meta-slide era all'interno del div genitore di $metaButton , ma poiché è al di fuori di questo div genitore, posso ottenere il diritto di traverso.

Vedi il mio script

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"); 
}); 

Chiunque può aiutare?

Grazie Josh

Answer 1

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

Questo è davvero vicino. Questo in realtà dice "trova elementi con la classe archive-meta-slide discendenti dei fratelli di questo elemento genitore". Vuoi dire "trova elementi con la classe archive-meta-slide che sono i fratelli di questo elemento". Per questo, utilizzare un selettore sulla chiamata siblings:

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

Si noti che, se il margine di profitto è sempre questa struttura, si potrebbe anche fare $(this).parent().next().

Vedi l'API jQuery:

• siblings
• find
• next

Answer 2

Usa

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

Questo è buono come i b ricerca it di top div modulo

$ (this) .parent(). genitore()

è la più

<div class="module"> 

Answer 3

Usa $(this).closest(".module") per trovare il modulo principale da dove il clic succede.

È inoltre probabilmente desidera utilizzare una funzione di completamento per modificare il testo dopo aver fatto l'animazione.

La cosa bella di .closest() è che cerca la catena principale fino a quando non trova un oggetto con la classe giusta. Questo è molto meno fragile rispetto all'utilizzo di un numero specifico di riferimenti .parent() se qualcun altro modifica un po 'il design HTML (aggiunge un altro div o span o qualcosa del genere nella catena principale).

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"); 
     }); 
    }, 
}); 

Si potrebbe anche asciugare un po 'e fare una funzione comune:

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

provare closest che vi permetterà di tornare indietro fino a raggiungere il genitore con il selettore specificato.

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

Answer 5

siete alla ricerca di ...

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

Se la struttura di cambiamenti #module, questo potrebbe essere più robusto:

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

Answer 6

Usa

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