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

很难准确地确定您想要什么（就像康斯坦丁所说，使用.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
    });
});

jsFiddle

于 2012-09-12T13:14:15.113 回答