jquery next() 元素答案

【问题标题】：jquery next() elementjquery next() 元素
【发布时间】：2012-07-25 15:57:15
【问题描述】：

我一直在浏览档案，但找不到有效的解决方案，我有一个菜单；

<ol>
    <li>
        <span><a class="doToggle"></a></span>
        <span class="toggleMe">stuff to hide and show</span>
    </li>
</ol>

我正在尝试在单击第一个跨度中的锚点时切换第二个跨度，我已经尝试过；

$(this).parent().next().toggle();

我认为这应该可行，但我没有得到任何回应。有什么提示我哪里出错了吗？

【问题讨论】：

1：请在我们可以尝试的地方重新创建您的问题，例如 jsfiddle.net。 2：这是调试的好情况。只需在 click 事件处理程序中放置一个断点并实时检查您的选择器。你不能失败。
点击绑定到<a>或?

标签： jquery list toggle parent next

【解决方案1】：

http://jsfiddle.net/27xCe/

HTML：

<ol>
    <li>
        <span><a class="doToggle" href='#'>Click Me to Toggle</a></span>
        <span class="toggleMe">stuff to hide and show</span>
    </li>
</ol>

jQuery:

$(function() {
    $('.doToggle').click(function(e) {
        $('.toggleMe').toggle();
        e.stopPropagation();
    });
});

或next():

$(function() {
    $('.doToggle').click(function(e) {
        $(this).parent().next().toggle();
        e.stopPropagation();
    });
});

http://jsfiddle.net/27xCe/1/

你应该做一些教程。 http://docs.jquery.com/Tutorials

【讨论】：

感谢 tuts 链接，以前实际上没见过；我不能按类选择，因为大约有 100 个元素具有相同的类，因此尝试使用 .next()，我不确定为什么 parent().next() 不起作用但移动了 click 事件到跨度而不是锚似乎可以解决问题，不知道为什么，所以； <ol> <li> <a>header</a> stuff to hide and show </li> </ol> 和 jQuery：$('.doToggle').bind('click', function() { $(this).next().toggle(); });
在您的情况下将点击事件移动到跨度的原因是因为该回调函数中的this 指的是“doToggle”类的一个元素，它必须是一个跨度。只有跨度有下一个元素。链接没有下一个元素，因为它是其包含范围内的唯一元素。
另外，如果您有很多跨度标签要为其分配事件，您应该考虑使用delegate 而不是bind (alfajango.com/blog/…)，因为bind 将事件节点分配给每个匹配的元素。这可能是一大堆事件节点。 D：D：D：
非常有趣的链接，谢谢！ :) 对于动态页面来说，delegate 似乎也很方便，其中 dom 元素可以在 dom 加载后添加......很酷！

【解决方案2】：

您在 yr 选择器中的错误类别应该是 toggleMe 而不是 doToggle

http://jsfiddle.net/pK2FV/

或者只是删除类选择器和do next

【讨论】：