jQuery 仅在父 div 中切换具有类的元素

Question

这两天我一直在用头撞桌子。我正在制作一个应用程序，显示来自数据库的信息、标题/链接、缩略图和保存在无序列表中的时间，如下所示： http://blog.madebycraig.com/images/full.jpg
我想做的是在元素上有一个最小化按钮，打开和关闭缩略图和保存时间： http://blog.madebycraig.com/images/minimized.jpg
我可以做到这一点，但要么全有要么全无。我单击一个最小化按钮，然后一切就完成了。我怎样才能包含它来只切换具有特定类名的项目，这些项目是最小化按钮所在的 div 的子项？我尝试过 .parent()、.child()、.next()、.prev()。我已经把我所知道的一切都扔给它了。现在我转向你们，善良的先生（或女士）。我做错了什么？这是我试图运行它的 ul。

echo'
<li class="bookmarkContainer">
<a href="'.$row['url'].'" class="toggle"><img class="thumb" src="images/placeholder.png" /></a>
<div class="title"><a href="'.$row['url'].'" class="bookmrk" target="_blank">'.$row['title'].'</a></div>
<div class="dt toggle">'.relativeTime($row['dt']).'</div><br />
<a class="collapse" href="#">hide</a>
<a class="delete" href="?delete='.$row['id'].'" id="'.$row['id'].'">Delete Bookmark</a>
</li>';

Answer 1

您可以使用 .closest() 和 .find() 像这样：

$(".collapse").click(function() {
  $(this).closest('.bookmarkContainer').find('.toggle').toggle();
});

如果你有很多这些，或者它们正在改变通过ajax（似乎是搜索结果的东西），使用 .live()< /a> 或 .delegate() 像这样：

$(".collapse").live('click', function() {
  $(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
//or...
$("#ulID").delegate('.collapse', 'click', function() {
  $(this).closest('.bookmarkContainer').find('.toggle').toggle();
});