1

サイドバーでリストを使用しており、そのリストに含まれる項目数のラベル番号を表示したいと考えています。

リストと私が達成しようとしていることを示すために、ここで JSFiddle http://jsfiddle.net/WRVgW/を作成しました。これはJqueryで達成できると確信していますが、方法がわからず、ガイダンスを探しています。

私の例では、34その下のリストに基づいて番号を動的に生成する番号をハードコーディングしました。

私がコメントした HTML コードを以下に貼り付けますが、http://jsfiddle.net/WRVgW/の結果との関連で見やすいかもしれません。

<div id="sidebar">
<ul class="sidebarSections">
    <li class="submenu">
    <a href="#"><span>Design Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 3)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>

    <li class="submenu">
    <a href="#"><span>Tech Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 5)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>

    <li class="submenu">
    <a href="#"><span>IA Projects</span><!--This is the name of the project-->
    <span class="label">34</span></a><!--This is the number which I want to display the number of li items below dynamically (should be 7)-->
        <ul>
            <li><a>Project x</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
            <li><a>Project y</a></li>
            <li><a>Project z</a></li>
        </ul>
    </li>
</ul>

4

3 に答える 3

4

考えられる解決策の 1 つ:

$(".submenu .label").text(function() {
  return $(this).closest(".submenu").find("li").length;
});

デモ: http://jsfiddle.net/WRVgW/1/

于 2013-01-18T10:06:16.887 に答える
0

コード (javascript) と uls の ID

var ul = document.getElementById("myul");
var liNodes = [];

for (var i = 0; i < ul.childNodes.length; i++) {
  if (ul.childNodes[i].nodeName == "LI") {
    liNodes.push(ul.childNodes[i]);
 }
}
于 2013-01-18T10:09:35.573 に答える
0

別のオプション

$('.sidebarSections ul').each(function(){
    var liCount = $(this).find('li').length;
    $(this).closest('.submenu').find('span.label').text(liCount);
});
于 2013-01-18T10:11:08.633 に答える