Comment définir le texte() d'un parent d'un parent d'un élément dans jQuery?

Question

Je construis un menu déroulant personnalisé dans jQuery. Maintenant je voudrais placer le texte de l'élément A.select au texte de l'élément sur lequel on clique. Mais je ne peux pas le faire fonctionner.

C'est le html:

<div class="pulldown"> 
    <a href="javascript:;" class="select">All cats/subs</a> 
    <div class="options"> 
    <a href="javascript:;">Option one A</a> 
    <a href="javascript:;">Option two A</a> 
    <a href="javascript:;">Option three A</a> 
     <a href="javascript:;">Option four A</a> 
    </div> 
</div> 

Ceci est le code jQuery:

$(document).ready(function() { 
$('div.pulldown').toggle(function() { 
    $(this).css('z-index','110'); 
    $('.options', this).css('z-index','100').show('fast'); 
    $('.options A', this).click(function(){ 
     var value = $(this).text(); 
     $(this).closest('DIV.pulldown A.select').text(value); 
    }); 
}, function(){ 
    $(this).css('z-index','10'); 
    $('.options', this).css('z-index','0').hide('fast'); 
}); }); 

Qu'est-ce que je manque ici?

Answer 1

Il sera plus facile de travailler avec si vous nettoyez votre code HTML un peu:

<dl class="menu"> 
    <dt class="topItem">All cats/subs</dt> 
    <dd class="subItem">Option one A</dd> 
    <dd class="subItem">Option two A</dd> 
    <dd class="subItem">Option three A</dd> 
</dl>

Puis votre jQuery se résume à ceci:

$(function() { 
    var $topItem = $('.topItem'); 
    var $subItems = $('.subItem'); 

    $topItem.bind('click', function() { 
     $subItems.toggle(); 
    }); 

    $subItems.bind('click', function() { 
     $topItem.text($(this).text()); 
     $subItems.toggle(); 
    }); 
});

Une démonstration en direct se trouve à http://jsfiddle.net/c8Qp8/. Remarque: cet exemple doit être développé pour prendre en charge plusieurs menus comportant plusieurs sous-éléments. En outre, au lieu de définir vos propriétés CSS avec JavaScript, vous devez les définir avec votre feuille de style. Qu'est-ce que la fonction toggle() fait là-bas?

Answer 2

Vous devez définir une variable globale pour l'ensemble div et l'utiliser comme une référence

$(document).ready(function() { 
    /*Grab the div into a variable*/ 
    var Pulldown = $('div.pulldown'); 

    /*Set up your event handlers*/ 
    $('.options a', Pulldown).click(function(){ 
     var value = $(this).text(); 
     $('.select',Pulldown).html(value); 
    }); 

    /*Toggle the pulldown*/ 
    Pulldown.toggle(function() { 
     Pulldown.css('z-index','110'); 
     $('.options', Pulldown).css('z-index','100').show('fast'); 
    }, function(){ 
     Pulldown.css('z-index','10'); 
     $('.options', Pulldown).css('z-index','0').hide('fast'); 
    }); 
}); 

Exemple en direct ici:

http://jsfiddle.net/RYcr3/2/