Question

I have some mark up like this:

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

Each of these list items will eventually be filled with a chart control as a dashboard. I am trying to fill in the “spanColumnNumber” with the index of the li item in the list, but I am having a difficult time. Here is my jQuery mark up

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

This works fine to get me the id, however I cannot get the index for some reason, I have tried every way imaginable (in my mind).

Answer 1

It’s hard to work out exactly what you want (and like Konstantin said, use .text() instead of .append()), but I think this should solve your issue:

$(".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());
      });
});​

Assuming you want the column number to be the index of the li and not the ul?

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