0

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>
tone
  • 1,535
  • 3
  • 15
  • 20

2 Answers2

0
$(this).parent("li").parent("ul");

That ill give you a reference to the listview's generated HTML ul control.

You could also use:

$(this).parents("ul");

Hope that helps :)

basicallydan
  • 2,134
  • 3
  • 25
  • 40
0

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.

jimmystormig
  • 10,672
  • 1
  • 29
  • 28