遍历 DOM 时遇到问题

Question

我有一些看起来像这样的 HTML，

<dl class="dropdown">  
    <dt><span>Gender</span><a href="">Go</a></dt>
    <dd class="shadow_50">  
        <ul>  
            <li><a href="#"><span class="option">male</span><span class="value">1</span></a></li>  
            <li><a href="#"><span class="option">female</span><span class="value">2</span></a></li>
       </ul>  
    </dd>
 </dl>

当单击 GO 链接时， DD 设置为隐藏 我有一些代码可以向下或向上滑动 DD。然而我的问题是，当我在页面中有多个实例时，如果这些实例一键打开页面上的所有DD，我如何定位最接近点击的DD，

我已经尝试过以下

$(".dropdown dt a").click(function(e) {
    $(this).closest("dd").slideToggle(defaults.speed);
e.preventDefault();
});

以及这个，

$(".dropdown dt a").click(function(e) {
    $(this).next("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

但我还没有成功。

Answer 1

您的想法是正确的，但是您尝试过的方法并没有按照您期望的方式发挥作用。最简单的选择可能是转到父级，然后找到适当的元素：

$(this).parent().next().slideToggle(defaults.speed);

您的尝试因以下原因失败：

.closest 遍历 DOM（它向上查找，因此它检查父级，然后检查所有进一步的祖先，直到找到匹配项）。在您的情况下，所需的元素不是 this 的祖先，因此这不起作用。

.next 获取当前匹配元素的下一个同级元素。在您的情况下，没有后续同级元素，因为 a 是 dt 中的最后一个元素。

请注意，如果您的 DOM 结构可能会更改，您可能需要使用 closest 来到达 dl 元素，然后使用 .find 来查找dd （参见@Nicola Peluchetti 的回答）。

Answer 2

您是否尝试过：

$(".dropdown dt a").click(function(e) {
    $(this).closest("dl").find("dd").slideToggle(defaults.speed);
    e.preventDefault();
});

您不能使用 next() 因为您的链接只有一个 SPAN 作为同级，并且您不能使用最接近的，因为它只是沿着树向上走

Answer 3

尝试;

    $(this).parent().siblings("dd").slideToggle(defaults.speed);