Question

这是我们的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);
    })

我们如何选择包含'...更多内容......'的div而不必为其分配id或类？ HTML是在整个网页中重复使用的常见模式，但总是使用不同的ID。

提前感谢您的帮助！

Answer 1

我不确定如何在jQuery中完成这项工作，但使用原生JS，您只需使用nextSibling方法。所以你得到父母，得到nextSibling，然后得到孩子（如有必要）

https://developer.mozilla.org/en-US/docs/Web/API/Node.nextSibling?redirectlocale=en-US&redirectslug=DOM%2FNode.nextSibling

我确信您可以通过快速Google搜索轻松找到jQuery语法来完成同样的事情。

编辑：使用jQuery看起来很简单，你可以指定你想要下一个DIV。 http://api.jquery.com/next-siblings-selector/

Answer 2

您可以使用Node.parentNode或Node.parentElement获取父节点/元素。要在某个节点之后获取元素，您可以使用Node.nextSibling。

Node.nextSibling

Node.parentNode

Node.parentElement

Answer 3

如果每种情况下的html结构相同（如上所述），那么您可以执行以下操作：

$('.open-inhalt').on('click', function() {
   var somemorediv = $(this).parent().parent().next();
   somemorediv.animate({'height': 0}, 500);
});

此外，我建议将隐藏内容设置为显示：none，然后显示somemorediv.slideDown(500)，其中500是以毫秒为单位滑动的时间长度。要隐藏内容，您可以使用.slideUp(500)。

Answer 4

您可以尝试使用

var nextDiv = $(this).parents('body > div > div').next();

或

var nextDiv = $(this).parent().parent().next();

其中this是您的<img>元素。

如果显示的结构有一些特定的容器，最终你可以使用比body更具体的东西。

Answer 5

首先，注意：使用相对访问器导航DOM树通常是不可取的，因为您对网页的结构做出了微弱的假设。如果有人更改了HTML结构的布局，或者布局在整个过程中不一致，则脚本将失败。除非绝对必要，否则请使用唯一id来选择元素。

您可以使用jQuery的.parent([selector])和.children([selector])来轻松导航DOM树。

以下代码可以满足您的需求：

$('.open-inhalt').click(function() {
    $(this).parent('div').parent('div').next().animate({'height': 0}, 500);
});

或者，选择特定索引节点，例如第二个{{1}}：

div

注意：每个$('.open-inhalt').click(function() { $(this).parent('div').parent('div').parent('div') .children('div:nth-child(2)').animate({'height': 0}, 500); });方法调用中的'div'选择器都是可选的，但提供了额外的安全性，您不会在DOM中意外丢失。

有关示例，请参阅this JSFiddle。

如何从<img/>嵌套在另一个<div> </div> </div>中选择没有id或类的下一个<div>

5 个答案: