2

インデックスに基づいて次と前のリンクを持つページに取り組んでいます。

私はこのようなことを始めました：

var nextPage = $("a.selected").next().find('a').attr('href');
window.location = nextPage;
return true;

問題は、「選択された」アンカーに子または兄弟がいない場合、これが機能しないことです。親レベルの次の即時リンクに移動し、ツリーをそのまま続行できるようにしたいと思います。マークアップの例では、「最後の項目」から「テスト」に移動し、子があればテストに移動できるようにしたいと考えています...

私が見る限り、すべてのレベルの条件を作成する必要がありますが、これは信頼できるとは思えません。これを行う最善の方法は何ですか？

マークアップは次のようになりますhttp://jsfiddle.net/wQy6Q/

ありがとう。

4

3 に答える 3

1

これを試して

var selected = $("a.selected");

//find children
var next = selected.find('a:first');

//find next
if(!next.length){
    next = selected.next().find('a:first');
}

//find parent
var parent = selected.parent();
while(!next.length && parent.not('.treeview')){
    var els = parent.find('a');
    var index = els.index(selected);
    console.log(next, parent)
    next = els.filter(':gt(' + index + ')').first();
    parent = parent.parent();
}

if(next.length){
    console.log(next);
    selected.removeClass('selected');
    next.addClass('selected')
}else{
    console.log('finished')
}

デモ：フィドル

于 2013-03-12T11:09:18.493 に答える
1

マークアップを変更できる場合は、「data」属性を使用して次のアンカーを取得できます。

マークアップの例：

<ul>
    <li><a href="test" data-index="1">Test 1</a></li>
    <li><a href="test" data-index="2">Test 2</a></li>
<ul>

Javascriptの例：

var index = $("a.selected").attr('data-index');
var nextPage = $('a[data-index="' + (index + 1) + '"]').attr('href');
window.location = nextPage;
return true;

属性を使用したくない場合は、cssクラスを使用することもできます。

于 2013-03-12T10:33:13.767 に答える
1

あなたの要件を正しく理解した場合：

たとえば、次の順序でツリー リンクを繰り返します。

  • 1回目：データの概要
  • 2 番目: データの各部分がどのように連携するか
  • 3回目：データ例ソフト
  • 4th: アップロード中にデータがインターネット接続をどのように使用するか
  • 5位：データスタッシュ
  • 6位：データへのWebアクセス
  • 7位：データモバイルアプリ
  • 8位：データ要件
  • 9位：データセキュリティ

すぐ...

それから

$('a').each(function(index, link) {
    console.log(index);
    console.log(link);
    $(link).attr('href'); // href attribute
});

(フィドルを参照してください: http://jsfiddle.net/wQy6Q/13/ )

そうでない場合はお知らせください。この回答を削除します

コメントの後 (コードを単純にするために変数をスキップできます):

var collection = $('.treeview a');
var needle = $('.treeview a.selected');
var index = collection.index(needle);

if (index !== -1) { // we have a selected link
    var resultLink = $('.treeview a:eq(' + (index + 1) + ')');
    if (resultLink) { // not the last link
        console.log(resultLink.attr('href'));
    } else { // if last link we retrieve the first one (remove this if you don't need this)
        $('.treeview a:first').attr('href');
    }

}

フィドルの例: http://jsfiddle.net/wQy6Q/19/ (重要: テスト上の理由から、選択したリンクをフィドルの 2 番目のリンクに移動しました)。

于 2013-03-12T10:39:58.120 に答える