8

整理および分析する必要がある情報のデータベースとして、ネストされた html 順序なしリストの構造をとろうとしています。jQueryを使用して情報をフィルタリング、カウント、および提示しようとしています。私は、リストが非常にきれいになるように、クラスまたは ID 属性を持たないように努めています。ルートのみが次のようなクラスまたは ID を持ちます。

<ul id="root">
<li> First first-level element
  <ul>
    <li> First second-level element
      <ul>
        <li>First Third-level element</li>
        <li>Second Third-level element</li>
      </ul>
    </li>
    <li> Second second-level element
      <ul>
        <li>Third Third-level element</li>
        <li>Fourth Third-level element</li>
      </ul>
    </li>
  </ul>
</li>
<li> Second first-level element
  <ul>
    <li> Third second-level element
      <ul>
        <li>Fifth Third-level element</li>
      </ul>
    </li>
  </ul>
</li>
</ul>

私の質問は、li の子および孫の ul (つまり、そのサブリスト) のテキストを選択せず​​に、li の直接の子テキスト ノードを選択するにはどうすればよいですか? たとえば、上記の html リストから、第 2 レベルのすべてのテキスト ノードのリストを作成したいと考えています。

  • 最初の第 2 レベル要素
  • 2 番目の第 2 レベル要素
  • 3 番目の第 2 レベル要素

または、第 3 レベルのすべてのテキスト...など。これにより、特定のレベルのアイテムをリストしてカウントすることができます。私が行った最も近いものは次のとおりです。

// to select items in second but not third level
$('ul#root ul').not('ul#root ul ul').children('li')

しかし、これは柔軟なソリューションではありません。リストに多くのレベル (たとえば 7 つ) がある場合はどうなるでしょうか? 6 番目のレベルを選択するには、次のようにする必要があります。

// to select items in second but not third level
$('ul#root ul ul ul ul ul').not('ul#root ul ul ul ul ul ul').children('li')

他に方法があるはずですが、見つけられませんでした。どんな提案でも大歓迎です。

4

3 に答える 3

4

ここで述べたように：

jQuery: ネストされた ul を含むリスト項目のテキストを検索する

「通常の DOM メソッドでは、1 つの要素だけのテキスト コンテンツにアクセスできます」

したがって、これは 1 つの解決策です。これは、第 3 レベルの要素を 1 つずつ出力します。

$('ul#root > li > ul > li > ul').children('li').each(function(){
  alert($(this)[0].firstChild.textContent);
});

これにより、第 2 レベルの要素が出力されます。

$('ul#root > li > ul').children('li').each(function(){
  alert($(this)[0].firstChild.textContent);
});

これにより、第 1 レベルの要素が出力されます。

$('ul#root').children('li').each(function(){
  alert($(this)[0].firstChild.textContent);
});
于 2010-08-13T03:14:20.700 に答える
1

2 番目の li を選択したい場合は、次のように子セレクターを<li> Second second-level element使用できます。>eq

$('ul#root > ul > li').eq(1)

3 番目のインデックスは から始まるため、に設定eqします。20

eachそれらをループするには、次のように使用できます。

$('ul#root > ul > li').eq(1).each(function(){
  alert($(this).text());
});

より詳しい情報：

于 2010-08-12T17:50:03.320 に答える