jquery - 如何找到在 dom 树中向下移动的下一个相似的 sibling

Question

这里我需要的是当定位在其中一个 dt 元素上时，我想跳转到下一个 dt 元素。我怎样才能实现这个目标？

<dl class="accordion">
    <dt>Select Category</dt>
    <dd></dd>

    <dt>select product</dt>
    <dd></dd>
</dl>

(function($) {
    var allPanels = $('.accordion > dd').hide();
    $('.accordion > dd:first-of-type').show();
    $('.accordion > dt:first-of-type').addClass('accordion-active');

    jQuery('.accordion > dt').on('click', function() {
        $this = $(this);
        $target = $this.next(); 
        if (!$this.hasClass('accordion-active')) {
            $this.parent().children('dd').slideUp();
            jQuery('.accordion > dt').removeClass('accordion-active');
            $this.addClass('accordion-active');
            $target.addClass('active').slideDown();
        }    
        return false;
    });
})(jQuery);

Answer 1

在 jquery 中看似显而易见的选项:.next("dt") 并非如此，因为 .next() 始终只返回下一个同级，应用过滤器 .next(filter) 仍然只返回下一个同级，但前提是它与过滤器匹配

jQuery 提供了两种替代方案:.nextUntil()和 .nextAll()

这些可以用作:

nextdt = thisdt.nextUntil("dt").next();
nextdt = thisdt.nextAll("dt").first();

其中 nextUntil 获取下一个兄弟节点，直到匹配(因此您需要另一个 next())，而 nextAll 获取所有匹配项(因此您需要 first())。

在问题的代码中，这提供了以下更新:

jQuery('.accordion > dt').on('click', function() {
    $this = $(this);
    $target = $this.nextAll("dt").first(); 

fiddle 示例:https://jsfiddle.net/0wk1mkeq/