jQuery仅在父div中切换带有类的元素 [英] jQuery toggle elements with class in parent div only

问题描述

在过去的两天里，我一直在桌子上跳动我的头.我正在制作一个显示数据库信息的应用程序，其中的标题/链接，缩略图和保存的时间包装在一个无序列表中，例如:

I've been beating my head against my desk for the last two days over this one. I'm making an app that displays info from a db, the title/link, thumbnail, and time saved wrapped in an unordered list, like so: http://blog.madebycraig.com/images/full.jpg
What I'm trying to do is have a minimize button on the element, toggling the thumbnail and time saved on and off: http://blog.madebycraig.com/images/minimized.jpg
I can accomplish this, but it's all or nothing. I click one minimize button, and everything goes. How can I contain it to just toggle items with a certain class name that are children of the div that the minimize button is in? I've tried .parent(), .child(), .next(), .prev(). I've thrown everything at it that I know. Now I turn to you, kind sirs (or madams). What am I doing wrong? Here's the ul I'm trying to run it on.

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>';

推荐答案

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

You can do it using .closest() and .find() like this:

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

如果其中有很多，或者它们正在通过ajax进行更改(似乎是搜索结果)，请使用 .delegate() 像这样:

If you have lots of these, or they are changing via ajax (seems like a search-resulty thing), use .live() or .delegate() like this:

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

这篇关于jQuery仅在父div中切换带有类的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！