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();

示例小提琴：https://jsfiddle.net/0wk1mkeq/

如何找到下一个类似的兄弟在dom树中向下移动

1 个答案: