2016-07-25 11 views
0

私がここで必要としているのは、dtの要素の1つに位置していて、次の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); 
+0

thisdtが何であるか疑問のコードで

、これは次の更新を与えますか? –

+0

これはうまくいきません... $ this.next( "dt")は何とかクリックされた同じ要素を指しています... domの次のdt要素が必要です –

+0

'$ target = $ this.nextAll( 'dt') .eq(0); '?! –

答えて

4
jqueryので明白オプションのように見える何

.next()は常にだけ.next(filter)は依然として非常に次の兄弟を返すフィルタを適用し、非常に次の兄弟を返すため、.next("dt")はありませんが、それだけであれば.nextUntil().nextAll()

これらのように使用することができます:

フィルタ

jQueryの二つの選択肢を提供して一致しました

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/

+0

+1あなたは正しい、それは明らかではない。もし私があなたの説明なしに推測しなければならなかったのは、 'next( 'filter')'はフィルタに一致する次の要素を返し、それは間違っていたと思います。有用な説明。 – BobRodes

関連する問題