0

次のようなマークアップがあります。

<div id="columns">

    <ul id="column1" class="column">
        <li class="widget color-green" id="intro">
            <div class="widget-head">
                <h3>Introduction Widget</h3>
                <span class="spanColumnId"></span>
                <span class="spanColumnNumber"></span>
            </div>
            <div class="widget-content">
                <div align="center">
                    <asp:Chart ID="chtBarTest" runat="server" CssClass="imgOpa" Width="620px">
                        <Series>
                            <asp:Series Name="chBar" ChartType="Area" Palette="Fire" ChartArea="MainChartArea">
                            </asp:Series>
                        </Series>
                        <ChartAreas>
                            <asp:ChartArea Name="MainChartArea" Area3DStyle-Enable3D="true">
                            </asp:ChartArea>
                        </ChartAreas>
                    </asp:Chart>
                </div>
            </div>
        </li>
        <li class="widget color-red">  
            <div class="widget-head">
                <h3>Widget title</h3>
                <span class="spanColumnId"></span>
                <span class="spanColumnNumber"></span>
            </div>
            <div class="widget-content">
                <asp:Chart ID="chPieTickets" runat="server" Width="620px" CssClass="imgOpa">
                <Series>
                    <asp:Series Name="srTickets" ChartType="Pie" Palette="Pastel" ChartArea="PieChartArea">
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="PieChartArea" Area3DStyle-Enable3D="true">
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
            </div>
        </li>
    </ul>

    <ul id="column2" class="column">
        <li class="widget color-blue">  
            <div class="widget-head">
                <h3>Widget title</h3>
                <span class="spanColumnId"></span>
                <span class="spanColumnNumber"></span>
            </div>
            <div class="widget-content">
                 <asp:Chart ID="chartUserActivity" runat="server" Width="620px" CssClass="imgOpa">
                <Series>
                    <asp:Series Name="stUserActivity" ChartType="Area" Palette="Pastel" ChartArea="UserActivityArea">
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="UserActivityArea" Area3DStyle-Enable3D="true">
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
            </div>
        </li>
        <li class="widget color-yellow">  
            <div class="widget-head">
                <h3>Widget title</h3>
                <span class="spanColumnId"></span>
                <span class="spanColumnNumber"></span>
            </div>
            <div class="widget-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
            </div>
        </li>
    </ul>
</div>

これらの各リスト項目は、最終的にダッシュボードとしてチャート コントロールで満たされます。リスト内のli項目のインデックスを「spanColumnNumber」に入力しようとしていますが、苦労しています。これが私のjQueryマークアップです

$(".column").each(function () {
       var id = $(this).attr("id");
       $(this).find(".spanColumnId").append($(this).attr("id"));
       $(this).find(".spanColumnNumber").append($("#"+id).index("li"));
});

これはIDを取得するのにうまく機能しますが、何らかの理由でインデックスを取得できません。考えられるあらゆる方法を試しました(私の頭の中で)。

4

2 に答える 2

1

あなたが望むものを正確に理解するのは難しいです（そしてKonstantinが言ったように、.text()代わりに使用し.append()てください）、しかし私はこれがあなたの問題を解決するはずだと思います：

$(".column").each(function () {
      var id = $(this).attr("id");
      $(this).find(".spanColumnId").text($(this).attr("id"));      
      $(this).find(".spanColumnNumber").each(function() {
          $(this).text($(this).closest('li').index());
      });
});​

列番号を？liではなくのインデックスにしたい場合。ul

http://jsfiddle.net/Yr3k7/1/

于 2012-09-12T13:04:19.527 に答える
0

.each を使用してそれぞれのインデックスを取得し、操作を少し簡単にすることもできます。例えば：

$(".column").each(function (i) {
    var cID = $(this).attr("id");
    $(this).children("li").each(function(ii) {
        $(this).find(".spanColumnId").text(cID)
            .next().text(ii); // where ii is the index count of each li within each ul
    });
});

jsフィドル

于 2012-09-12T13:14:15.113 に答える