note

【jQuery】tableタグの中にあるliの件数を取得したい

普段からCSSもjqueryもなんとなく、なんとなーく使っているので、いつまでたってもビギナーのまま。。

テーブルの中にあるリストの件数を取得したい

サーバサイドはC#です。

View

<table id="tbl">
    <thead>
        <tr>
            <th style="text-align:center;" id="display_no">@Html.LabelFor(m => m.First().display_no, new { @class = "control-label", @style = "font-weight:bold" })</th>
            <th style="text-align:center;">@Html.LabelFor(m => itmFirst.name, new { @class = "control-label", @style = "font-weight:bold" })</th>
            <th style="text-align:center;">@Html.LabelFor(m => itmFirst.enabled, new { @class = "control-label", @style = "font-weight:bold" })</th>
            <th style="text-align:center;">@Html.LabelFor(m => itmFirst.color, new { @class = "control-label", @style = "font-weight:bold" })</th>
            <th style="display:none"></th>
        </tr>
    </thead>
    <tbody id="sortable">
        @foreach (website.Models.Master.partModel itm in Model)
        {
            <tr>
                <td style="text-align:center;" class="row_no" id="order_num">@itm.display_no</td>
                <td>@itm.name</td>
                <td style="text-align:center; vertical-align:middle;">
                    @Html.CheckBoxFor(mbox => itm.boolEnabled)
                    @Html.Hidden("enabled", itm.enabled, "enabled")
                </td>
                <td style="text-align:center; vertical-align:middle;" ><div id="palette_@itm.id">@Html.Partial("_ColorPalette")</div></td>
                <td style="display:none;" id="id">@itm.id</td>
            </tr>
        }
    </tbody>
</table>

@Html.Partial("_ColorPalette")

<div class="group">
    <ul>
        <li><a style="color:navy"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:teal"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:green"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:purple"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:maroon"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:deeppink"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:palevioletred"><i class="fa-circle"></i></a></li>
        <li><a style="color:lightblue"><i class="fa fa-circle"></i></a></li>
        <li><a style="color:mediumturquoise"><i class="fa-circle"></i></a></li>
    </ul>
</div>

Javascript

$.each($("#tbl tbody").children(), function () {
    //alert($(this).html());  // <tr>の中身を表示する。
    alert($(this).find('li').length); // ←ここ。
});

$(this).find('li').length
これで取得できました。
これを探し当てるのに小1時間・・・。

alert結果。

 

さらにリストをまわして処理させたい場合はこう。

$.each($("#tbl tbody").children(), function () {
    //alert($(this).html());  // <tr>の中身を表示する。
    $(this).find('li').each(function () {

        // 子要素(a)のプロパティ値を表示する
        alert($("a", this).css('color'));

        return false;
    });
    return false;
});

ちなみに、eachから抜けたい場合は「return」だけじゃだめ。
「return false」と書く。

-note