jsFiddle

Question

我有这样的标记：

<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"));
});

这样可以很好地获取我的身份，但由于某些原因我无法获得索引，我已经尝试过各种可想象的方式（在我看来）。

Answer 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/

Answer 2

只是一个想法，你可以使用.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
    });
});

jquery获取无序列表中列表项的索引

2 个答案:

jsFiddle