jQuery - 不确定使用哪种方法,closest() 和parent() 不起作用
天哪,我感觉我在向 stackoverflow 发送垃圾邮件,这是我今天的第 3 篇文章。抱歉,呵呵。
我什至之前发布过一个与此相关的问题,但是我已经更改了代码,所以我认为最好发布一个新问题。
$('.pmlist ul li h4 .toggle').click(function() {
$(this).closest('.meddel').toggle(250);
});
这就是我现在所拥有的。 Closest() 方法不起作用的原因是因为 div .meddel 就在 h4 元素旁边。而closest()只会沿着DOM树向上爬行,忽略其他子元素。正确的? parent() 的工作原理几乎相同,但也不起作用。
因为我只想切换元素中最近的 .meddel div,所以我需要一些东西,是的,只是抓取最近的一个,而不是全部。
为了稍微澄清一下,这里是一个列表项的 HTML:
<li class="item">
<h4><a class="toggle">[topic]</a><small>2010-04-17 kl 12:54 by <u>[name]</u></small></h4>
<div class="meddel">
<span>
<img style="max-width: 70%; min-height: 70%;" src="profile-images/img.jpg" alt="" />
<a href="account.php?usr=47">[name]</a>
</span>
<p>text</p>
</div>
</li>
我有几个类似的项目,如果我单击一个切换链接,我只想切换最近的 .meddel,如前所述。
谢谢。
God i feel like i'm spamming stackoverflow, this is my 3rd post for today. Sorry, heh.
I even posted a question regarding this before, kind of, but i've changed the code a bit since so i thought it was better to post a new question.
$('.pmlist ul li h4 .toggle').click(function() {
$(this).closest('.meddel').toggle(250);
});
That's what i've got now. The reason why the closest() method isn't working is because the div .meddel is just next to the h4 element. And closest() only crawls right up the DOM tree, ignoring other child elements. Right? parent() works almost the same and doesn't work either.
And as i only want to toggle the closest .meddel div in the element, i need something that, yeah justs grabs the nearest one, and not all of them.
To clear it up a bit, here's the HTML for one list item:
<li class="item">
<h4><a class="toggle">[topic]</a><small>2010-04-17 kl 12:54 by <u>[name]</u></small></h4>
<div class="meddel">
<span>
<img style="max-width: 70%; min-height: 70%;" src="profile-images/img.jpg" alt="" />
<a href="account.php?usr=47">[name]</a>
</span>
<p>text</p>
</div>
</li>
I have several items like that, and if i click one toggle link, i just want the nearest .meddel to be toggled, as mentioned before.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以只使用:
更新(根据 tvanfosson 评论):
这是一个更灵活、更安全的解决方案。首先它获取条目容器 (
.item
),然后找到条目的主体并切换它。它对 DOM 中的功能更改不太敏感。You could just use:
Update (according to tvanfosson comment):
This is a much more flexible and safer solution. First it gets the entry container (
.item
), then find the body of the entry and toggles it. It's less sensitive to feature changes in DOM.这是解决此问题的另一种方法:
这会转到
,然后查找要切换的同级
.meddel
元素。 您可以在此处阅读有关.siblings()
的更多信息。此方法使其对标记更改更具弹性,但如果脚本无论如何都是紧密耦合的,那么这可能不是一个太大的问题。Here's another way to approach this:
This goes up to the
<h4>
, then looks for a sibling.meddel
element to toggle. You can read more on.siblings()
here. This method keeps it a bit more resilient to markup changes, but if the script is tightly coupled anyway, that may not be much of a concern.一直向上到列表元素,然后找到具有匹配类的包含元素。对于大多数较小的 DOM 更改来说,这将更加稳健,即,它不依赖于相对位置。
Go up all the way up to the list element, then find the contained element with the matching class. This will be more robust with respect to most minor DOM changes, i.e., it doesn't rely on relative placement.