如何从嵌套在另一个<div>中的<img>中选择没有id或类的下一个<div>
如何从嵌套在另一个<div>中的<img>中选择没有id或类的下一个<div>
提问于 2013-12-06 00:17:28
以下是我们的html：
<div>
<div>
...SOME CONTENT...
<div><img class="open-inhalt"></div>
</div>
<div>
...SOME MORE CONTENT...
</div>
<div>在这里我们的jQuery：
$('.open-inhalt')
.click(function(){
$('SOME MORE CONTENT DIV').animate({'height': 0}, 500);
})我们如何选择包含'...some更多内容.‘的div而不必给它分配一个id或类？HTML是在整个网页中重复出现的一种常见模式，但始终具有不同的ids。
提前感谢您的帮助！
Stack Overflow用户
发布于 2013-12-06 00:35:55
首先，注意:使用相对访问器导航DOM树通常是不可取的，因为您对网页的结构做了很弱的假设。如果有人更改了HTML结构的布局，或者布局始终不一致，那么您的脚本就会失败。除非绝对必要，否则请使用唯一的id来选择元素。
您可以使用jQuery的.parent([selector])和.children([selector])相当容易地导航DOM树。
下面的代码可以实现您想要的结果：
$('.open-inhalt').click(function() {
$(this).parent('div').parent('div').next().animate({'height': 0}, 500);
});或选择特定索引节点，如第二个div
$('.open-inhalt').click(function() {
$(this).parent('div').parent('div').parent('div')
.children('div:nth-child(2)').animate({'height': 0}, 500);
});注意:每个'div'方法调用中的parent()选择器是可选的，但提供了额外的安全性，您不会意外地在DOM中丢失。
有关示例，请参见这个JSFiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20413542
复制相关文章
相似问题
腾讯云开发者
