Simple jQuery task failing: hide child elements of <div> tag

Question

There has to be a simple explanation for this.

I have a parent <div> tag containing a number of child divs that need to be hidden depending on their class. Problem is, I can't even seem to get a handle to my parent div. What on earth is the problem here? I'm going out of my gourd.

The jQuery code (snippet) looks like this:

$(function() {
    $('#dasummary').children().hide();

The offending <div> section and all its content is as follows:

<asp:ListView ID="lvLedger" runat="server" DataSourceID="ldsLedger">
    <LayoutTemplate>
        <h2>Current Day Activity Summary</h2>
        <div id="#dasummary">
            <div id="itemPlaceholder" runat="server" />
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div id="toggleRow" runat="server" class="group">
            <asp:Image ID="imgToggle" runat="server" 
                ImageUrl="~/App_Themes/SunDIAL/images/maximize.png"
                ImageAlign="Left" />
            <%# Eval("Key") %> (<%# Eval("Count") %> entries)
        </div>

        <!-- Add nested ListView control for individual items here -->
        <asp:ListView ID="lvItems" runat="server" DataSource='<%# Eval("Tasks") %>'>
            <LayoutTemplate>
                <div class="activity_summary">
                    <table>
                        <thead>
                            <tr>
                                <th class="first" />
                                <th>Day</th>
                                <th>Job</th>
                                <th>Batch</th>
                                <th>Duration</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="itemPlaceholder" runat="server" />
                        </tbody>
                    </table>
                </div>
            </LayoutTemplate>
            <ItemTemplate>
                <tr id="item" runat="server" class="itemRow">
                    <td class="first" />
                    <td>
                        <h4>
                            <a><%# Eval("Day") %></a>
                        </h4> 
                    </td>
                    <td><%# Eval("Project") %></td>
                    <td><%# Eval("Name")%></td>
                    <td><%# Eval("Hours") %>:<%# Eval("Minutes","{0:00}") %></td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

    </ItemTemplate>
</asp:ListView>

The rendered HTML looks (as far as I can see) just fine. Let me know if you want the whole thing; here's the important bit:

<div id="#dasummary">

        <div id="ctl00_ContentPlaceHolder1_dashboardFrame_ctl00_ActiveDayLedger1_lvLedger_ctrl0_toggleRow" class="group">
            <img id="ctl00_ContentPlaceHolder1_dashboardFrame_ctl00_ActiveDayLedger1_lvLedger_ctrl0_imgToggle" src="App_Themes/SunDIAL/images/maximize.png" align="left" style="border-width:0px;" />
            Wednesday (2 entries)
        </div>


        <!-- Add nested ListView control for individual items here -->

                <div class="activity_summary">

There has to be a reason I'm failing at such a simple operation. Can you spot it?

Answer 1

The id of your div is wrong. In the html it must be dasummary, not #dasummary, so you can grab it by jQuery with $("#dasummary")

Answer 2

"#" in jQuery selector means that jQuery should select elements by id. So, in your case there are two ways:

1. Use id without "#"
2. Change jQuery query to smth like "##dasummary". It should work.

Answer 3

That's right, you should have

<div id="dasummary">

Also, it might be needed to use the each function:

$("div", "#dasummary").each(function() {
   $(this).hide();
});