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

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() 或 .delegate()，如下所示：

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