0

この種の構造を想定すると、次のようになります。

<li class="page-title">Global</li>
<ul>
    <li class="element">Design Elements</li>
    <li class="page-title">Alerts</li>
    <ul>
        <li class="element">Alert 1</li>
        <li class="element active">Alert 2</li>
        <li class="element">Alert 3</li>
        <li class="element">Alert 4</li>
        <li class="element">Alert 5</li>
    </ul>
</ul>
<li class="page-title">Accounts</li>
<ul>
    <li class="element">Accounts Main</li>
</ul>

.elementネスト構造に関係なく、要素をステップスルーするにはどうすればよいですか?

現在、私は を使用して.next('.element')いますが、要素のセットの上部または下部で、null を返し始めます。

可能であれば、「これがセットの最後なら、レベルを設定して元に戻す」ようなロジックを使用することは避けたいと思います。

編集:明確にする必要があります。上下のキーをバインドしたこれらのリストを上下に移動しようとしているため、実際の相対的な次の要素を選択できるようにする必要があります.active。

したがって、アラート 2 にあると仮定すると、省略した関数は data-job 属性に基づいて実行されます。上キーを押すと、アラート 1 に進み、その機能が再度実行されます。上キーをもう一度押すと、「デザイン要素」が表示されます。

4

2 に答える 2

3

次に、ではなく、通常のセレクターを使用しnext()ます。

$('.element').each(function() {
      alert($(this).text());
})
于 2013-08-19T17:16:11.193 に答える
0

自力で解決できました！

上下のキーを監視するためのビットも含めています。

$(window).keyup(function(e){

    if (e.keyCode == 40){
        var next_element = $('.active').next('li.element');

        if($('.active').is('li:last-of-type' || 'li:only-of-type')){

            next_element = $('.active').parent().nextAll().eq(1).children('.element:first-of-type');
        }   
            elementExpand(next_element);
                }

    if (e.keyCode == 38){
        var prev_element = $('.active').prev('li.element');

        if($('.active').is('li:first-of-type' || 'li:only-of-type')){
            prev_element = $('.active').parent().prevAll().eq(1).children('.element:last-of-type');

        }
            elementExpand(prev_element);


    }
})

それは最も洗練されたものではありませんが、機能します。

于 2013-08-19T18:59:42.647 に答える