2010-06-17 8 views
1

J'ai un sélecteur d'émoticônes qui s'ouvre lorsqu'un utilisateur clique sur une entrée d'un journal. La façon dont j'ai travaillé, c'est que le panneau sélecteur emote est caché en haut de la page. Quand un utilisateur clique sur le 'contrôle d'emote' associé à une entrée, j'utilise JavaScript pour saisir le code HTML du panneau de sélection d'emotes en haut de la page et l'insérer à côté de l'entrée. En utilisant Firebug, voici à quoi ressemblerait le produit fini dans la page (extrait de l'élément inspect). Je suis en train d'obtenir l'ID de la classe « emote contrôle-conteneur » qui contient l'identifiant d'entrée:jSélecteurs jQuery - problèmes parentaux

<td> 
    <div id="1467002" class="emote-select emote-default">&nbsp;</div> 
    <div class="emote-control-container" id="emote-controls-1467002"> 
    <div id="emote-control-selector"> 
     <div id="emote-control-selector-body"> 
      <ul> 
       <li id="emote-1"><img src="/images/default_emote.gif?1276134900" class="emote-image" alt="Default_emote"></li> 
       <li id="emote-2"><img src="/images/default_emote.gif?1276134900" class="emote-image" alt="Default_emote"></li> 
       <li id="emote-3"><img src="/images/default_emote.gif?1276134900" class="emote-image" alt="Default_emote"></li> 
       <li id="emote-4"><img src="/images/default_emote.gif?1276134900" class="emote-image" alt="Default_emote"></li> 
      </ul> 
     </div> 
     <div id="emote-control-selector-footer"> 
      &nbsp; 
     </div> 
    </div> 
</div> 
        </td> 

J'ai besoin de l'ID d'entrée ainsi que l'ID emote de faire un post via AJAX lorsqu'un utilisateur sélectionne une emote du panneau sélecteur en cliquant dessus.

Je suis en mesure d'obtenir l'ID emote très bien avec ce que j'utilise pour alerter-la emote sélectionnée ID:

jQuery('li').live('click', function(e) { 
    e.preventDefault; 
    var emoteId = this.id; 
    alert(emoteId); 
    }); 

Je ne parviens pas à parcourir jusqu'à DOM pour obtenir la ID d'élément de '.emote-control-container.

J'ai tout essayé, mais je me attends que cela fonctionne, mais il n'a pas:

jQuery('li').live('click', function(e) { 
    e.preventDefault; 
    var entryId = jQuery(this.id).parent(".emote-control-container").attr("id"); 
    alert(entryId); 
    }); 

Qu'est-ce que je fais mal.? Je ne peux pas cibler l'ID du conteneur .emote-control.

Répondre

1

Vous voulez .closest() ici, comme ceci:

jQuery('li').live('click', function(e) { 
    e.preventDefault; 
    var entryId = jQuery(this).closest(".emote-control-container").attr("id"); 
    alert(entryId); 
}); 

L'appel .parent(selector) ne reçoit que le parent immédiatsi elle correspond à la sélection, il ne tient pas en montant jusqu'à ce qu'il trouve (ce qui est un peu contre-intuitif). .closest(selector)ne grimper jusqu'à ce qu'il corresponde au sélecteur, ce que vous recherchez.

+0

Génial Nick, merci! Cela a fonctionné comme un charme, j'avais essayé le plus proche() auparavant dans mes nombreuses expériences, mais je n'ai clairement pas compris. C'est parfait. – aressidi