我有这个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>
重复两次或更多次。我想要做的是,当我点击“评论(5)”链接时,会出现“comment_container”类,但只显示同一个“容器”类中的那个。
这可能吗?
答案 0 :(得分:1)
您可以使用.closest()
前往.container
然后.find()
查看其中,如下所示:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here,如果您对找到与this
here's a full list of the Tree Traversal functions相关的其他内容感到好奇。
顺便说一下,你的HTML中有一个需要纠正的错误,这个:
<span class="username">{username} Debugr Rocks! </div>
应该是:
<span class="username">{username} Debugr Rocks! </span>