2

ページの HTML リスト ( <ul>、<li>など) があり、複数のアイテムがさまざまな深さにあります。このリストを一度に 1 要素ずつトラバースするコードを作成しようとしています。そのため、「次へ」ボタンは次の<li>要素の ID を返します。これは、現在の要素の直接の兄弟であるか、子<ul>要素にあるか、親<ul>要素にある可能性があります。同様に、「前へ」ボタンも同じことを行いますが、逆になります。

html の例を次に示します。

<ul>
  <li id="post_item_1"><a href="#post1">Vestibulum ultrices, ante non tincidunt molestie, purus enim varius urna, nec bibendum...</a>

   <ul>
   <li id="post_item_26"><a href="#post26">This planet has &mdash; or rather had &mdash; a problem, which was this: most of...</a>

    <ul>
    <li id="post_item_27"><a href="#post27">A towel, it says, is about the most massively useful thing an interstellar hitch...</a>
    </li>
   </ul>

   </li>
  </ul>
  </li>
  <li id="post_item_2"><a href="#post2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec velit augue,...</a>

   <ul>
   <li id="post_item_58"><a href="#post58">Reply to first post, with an edit</a>
   </li>

   <li id="post_item_59"><a href="#post59">Another reply to first post, made after the first reply</a>
   </li>
  </ul>
  </li>
  <li id="post_item_4"><a href="#post4">Phasellus vitae est tellus, vel aliquam lectus. Cras augue tellus, pulvinar a blandit...</a>

   <ul>
   <li id="post_item_60"><a href="#post60">Reply to second post</a>

   </li>
  </ul>
  </li>
  <li id="post_item_3"><a href="#post3">Pellentesque consequat urna mauris, luctus adipiscing enim. Sed quis lectus vel...</a>
  </li>
  <li id="post_item_28"><a href="#post28">"The Babel fish" said The Hitchhiker's Guide to the Galaxy quietly, "is small, yellow...</a>

  </li>
  <li id="post_item_61"><a href="#post61">Hello there, it is very worrying</a>

   <ul>
   <li id="post_item_62"><a href="#post62">Don't be scared, or scarred, or sacred, or Skesis!</a>
   </li>
  </ul>
  </li>

  <li id="post_item_67"><a href="#post67">Well, to be fair, at the end of the day, when all is said and done, I'd like to...</a>
  </li>
</ul>

私は数時間jqueryをいじりましたが、これは私が得た限りです:

if (!node) {
// start with the selected node
node = $('#content #postNavigator ul li.selected')
}   


if ( $(node).has('ul').length ) {
    // has child <ul> 
nextNode = $($(node).children()[1]).children()[0];      
} 
else {
// has a sibling
if ($(node).next('li').length) {
    nextNode = $(node).next('li');
}
else {  

    // recursion needed here - this code will return parent, but only when 1 level deep.
    if ($(node).parent().parent().next('li').length) {
        nextNode = $(node).parent().parent().next('li');
    }
    else {          
        return false;
        }
    }               
}

上記は、次のノード、または存在する場合は子ノードを返し、兄弟または子がもう存在しないが、1 レベルの深さしかない場合は親ノードを返します。HTML リストは無制限の深さにすることができるので、何らかの再帰が必要になるのでしょうか? これは、私のスキルが私を連れて行くことができる限りです。このリストを同じ方法で逆の順序で作業するために、「前の」リンクについても考え始めていません。

私はdevshedで同じことを尋ねました（数週間前）が、返事がありません.

回答ありがとうございます。

忍者、私はあなたのものを実装して成功しました。ネストされたリストを非常にうまく上下に移動できるようになりました。

さらに質問です。よろしければ、ツリー内のある点で「位置」を開始する機能が必要です。ユーザーは、ハッシュ (#post9 など) を使用してツリー内のノードを選択できます。リスト内の任意のノードをクリックして選択するか、そのノード独自のハッシュを含む URL をブックマークすることができます。

私のさらなる質問は、URL のハッシュを使用して、ツリー内のノードを見つけてその位置を取得するにはどうすればよいでしょうか? URL のハッシュは、li ノードの ID と相関しています。

4

3 に答える 3

2

すでに jQuery を使用しているので、jQuery に組み込まれている DOM トラバーサル メカニズムを利用することもできます。この場合、主に と を気にすることに$().findなり$().eqます。

$().find

jQuery は、他のセレクターのレベルより下に存在するすべての一致する要素を実際に見つけることができます。この単一の方法で、作業の大部分が実行されます。

// Returns a jQuery object containing every 'li' on the page
var items = $('body').find('li');

$().eq

実際、これらの個々のli要素にアクセスするためのオプションがいくつかあります。jQuery は配列のような構造です。つまり、インデックスによって各要素にアクセスできます。ただし、 jQuery には、コレクションから個々の要素を取得するための組み込みメソッドもあり、それらは jQuery オブジェクトとしても返されます。

// Good: Returns the first element from the jQuery collection as a JS DOMElement
items[0];

// Better: Returns the first element from the jQuery collection as a jQuery collection
items.eq(0);

それを一緒に入れて

ツールが用意できたので、次は、リスト内の 1 つの要素から次の要素に移動するためのロジックを少し適用する必要があります。本当に必要なものはこれだけです。また、マークアップを jsFiddle プロジェクトにコピーし、それがどのように機能するかを示すために少し機能を追加しました: http://jsfiddle.net/ninjascript/Kt8f8/。

var items = $('body').find('li');
var length = items.length;
var position = -1;

function next() {
    position = (position + 1 < length) ? position + 1 : 0;
    return items.eq(position);
}

幸運を！

于 2011-08-13T19:09:48.723 に答える
0

外部ライブラリを使用したくない場合は、 javascript ドキュメント メソッドの組み合わせを使用する必要があります。

と

dom 要素メソッド

幸運を！

于 2011-08-13T19:20:37.483 に答える
0

私はこれがうまくいくと信じています：

    function nextNode(selectedNode) {
    var nextNode = selectedNode.next("li");
    if (nextNode.length) {
        return nextNode;
    }

    return nextNode.closest("li").next();
}

これが行うことは、選択されたノードを取得し、次のノードがある場合はそれを返すことです。そうでない場合は、最も近い親 li タグを検索し、そこから次のノードを取得します。

于 2011-08-13T18:35:51.593 に答える