Trouver id d'un élément LI dans une structure imbriquée UL LI en utilisant jQuery

Question

Je l'exemple de code HTML suivant: http://pastebin.com/Mya6tPc6 Et voici le code jQuery Je suis en train d'utiliser:

$("#folder1").click(function(){ 
alert($(this).attr('id')); 
}); 

$("#f1").click(function(){ 
alert($(this).attr('id')); 
}); 

est ici le problème : Si l'utilisateur clique sur l'élément 'folder1', il affichera 'folder1' dans la boîte d'alerte. C'est bon. Si l'utilisateur clique sur 'folder1.1', il affichera 'folder1' dans la boîte d'alerte, en fait je ne veux pas qu'il fasse quoi que ce soit à ce stade. Si l'utilisateur clique sur 'f1', il affichera d'abord une boîte d'alerte avec 'f1' puis une autre boîte d'alerte avec 'folder1'. J'en ai besoin pour afficher une seule boîte d'alerte avec 'f1'.

Quelqu'un pourrait me dire comment faire? La structure est une arborescence de répertoires, elle peut donc avoir un nombre illimité de profondeur. Je dois le configurer de telle sorte que lorsque l'utilisateur clique sur un dossier LI, une fonction affiche le contenu de ce dossier dans une autre zone.

Je sais qu'il y a d'autres gestionnaires de fichiers mais je dois en faire un seul dans ce cas.

J'ai cherché 'jQuery et nested UL' et le tri dans google, mais jusqu'à présent, je n'ai pas trouvé de solution. Ai-je cherché le mauvais terme?

Merci beaucoup pour vos réponses. Cordialement, Tony.

Answer 1

Vous n'êtes pas tout à fait certain de ce que vous voulez encore, mais vous semblez avoir des problèmes de bulles d'événements. Cela signifie que si vous cliquez sur un élément imbriqué, l'événement se déclenchera d'abord sur cet élément, puis sur son parent, jusqu'à atteindre l'élément de niveau supérieur dans votre document. Vous pouvez:

1) annuler l'événement après avoir manipulé le clic sur l'enfant (# f1); 2) vérifier si la cible de l'événement est l'élément pour lequel vous gérez actuellement l'événement; voir event object

$("#folder1").click(function(e){ 
    if (e.target == e.currentTarget) { 
     // do something 
    } 
}); 

Answer 2

(La boîte de commentaire ne me permet pas de poster ce message, donc je suis en utilisant la boîte de réponse. J'espère que ce n'est pas un problème.)

Bonjour Paul,

Merci pour vos commentaires. Ce qui suit a bien fonctionné:

var i=0; 

$("#folder1").click(function(e){ 
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>"); 
    return false; 
}); 

$("#folder1_1").click(function(e){ 
    var me = e.currentTarget; 
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>"); 
    return false; 
}); 

$("#f1").click(function(e){ 
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>"); 
    return false; 
}); 

Le i est seulement à des fins de test.

Le e.preventDefault(); n'a pas bien fonctionné avec le plugin jQuery Treeview. Donc j'ai dû l'enlever. On dirait que le retour est faux; Fait le travail.

Ce:

if (e.target == e.currentTarget) ... Puis-je savoir si vous obtenez un vrai de cette comparaison dans tous les cas?

Je peux l'obtenir pour travailler avec les éléments suivants:

if(e.currentTarget === this) 
    { 
     alert("Its me!"); 
    } 

Je ne sais pas si cela fonctionne sur tous les navigateurs, Safari et Chrome cela semble ok.

Merci beaucoup pour les idées et les informations sur des choses comme les bulles d'événements aussi. Cordialement, Tony.

Bonjour Yi Jiang,

Merci, vous avez raison. Je vais le faire à partir de maintenant. Cordialement, Tony.