Question

in my website i have page with 2 listview’s, each listview contain multiple div’s and for each div i implement click event so i can change style to the chosen div but this changes occur to both of the listviews how can i make sure that when div is clicked only the parent listview will be affected? Here is my code:

<asp:ListView ID="ListView1" runat="server">
 <LayoutTemplate>
   <div id="itemPlaceholder" runat="server"></div> 
 </LayoutTemplate>
  <ItemTemplate>
         <div class="box" runat="server"></div> 
         <div class="selectedBox" runat="server"></div>
         <div class="box" runat="server"></div>
         <div class="box" runat="server"></div>
  </ItemTemplate>
</asp:ListView>

    <asp:ListView ID="ListView2" runat="server">
     <LayoutTemplate>
       <div id="itemPlaceholder" runat="server"></div> 
     </LayoutTemplate>
      <ItemTemplate>
             <div class="box" runat="server"></div> 
             <div class="selectedBox" runat="server"></div>
             <div class="box" runat="server"></div>
             <div class="box" runat="server"></div>
      </ItemTemplate>
    </asp:ListView>

    <script type="text/javascript">
        $(".box").click(function () {
        $(this).siblings().removeClass("selectedBox");
        $(this).addClass("selectedBox");
        });
    </script>

Answer 1

I don’t think there’s something wrong with your jQuery. Take a look at my test at http://jsfiddle.net/wehEH/. However, the div you use in the Layouttemplate won’t get rendered. Add a surrounding div in the ItemTemplates and you should be fine.