只有父级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改变（似乎是一个搜索resulty的事情），使用.live()或.delegate()是这样的：

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