basculer une classe répétée dans jQuery

Question

J'ai ce code HTML:

<div id="content"> 
    <div class="profile_photo"> 
    <img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/> 
    </div> 
    <div class="container" id="status-#"> 
    <div class="message"> 
    <span class="username">{username} Debugr Rocks! 
    </div> 
    <div class="info">24-oct-2010, 14:05 GMT · <a href="#" class="toggle_comment" title="Comment">Comment (5)</a> · <a href="#" title="Flag" class="toggle_flag">Flag</a> · Via <a href="#" title="Twitter">Twitter</a> 
</div> 
    <div class="comment_container"> 
    <div class="profile_photo"> 
    <img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/> 
    </div> 
    <div class="comment_message"> 
    <span class="username"><a href="#" title="{username}">{username}</a></span> Debugr Rocks! XD 
    </div> 
    <div class="comment_info">24-oct-2010</div> 
    </div> 
    </div> 
    <div class="profile_photo"> 
    <img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/> 
    </div> 

C'est répété deux fois ou plus. Ce que je veux faire, c'est quand je clique sur le lien "Comments (5)", la classe "comment_container" apparaît, mais seulement celle de la même classe "container".

C'est possible?

Answer 1

Vous pouvez utiliser .closest() pour aller jusqu'à la .container puis .find() regarder à l'intérieur, comme ceci:

$(".toggle_comment").click(function() { 
    $(this).closest(".container").find(".comment_container").show(); 
}); 

You can try it here, si vous êtes curieux de trouver d'autres choses par rapport à thishere's a full list of the Tree Traversal functions.

---

En aparté, il y a une erreur dans votre code HTML qui a besoin de corriger, ceci:

<span class="username">{username} Debugr Rocks! </div> 

devrait être:

<span class="username">{username} Debugr Rocks! </span>