javascript - jQuery each function to show a different pop up on each click -


hi trying show separate box each 1 , can't figure out how each loop work right...this code showing every 1 @ same time instead of individual boxes...thanks help.

<style type="text/css"> .div_actionslist {     border:1px solid #ccc;     min-width:100px;     max-width:200px;     position:relative;     top:5px; } .div_actionsclick {     cursor:pointer;     font-size:14px; } .div_actionslist ul {     line-height:18px;  } .div_actionslist ul li{     line-height:18px;     font-size:14px;     padding:3px 8px; }  .div_actionslist ul li:hover {     background:#0cf;     cursor:pointer;     color:#fff; } </style>  <script type="text/javascript"> $(function() {      $('.div_actionslist').hide();      $('.div_actionsclick').each(function(){         $(this).click(function(){             $('.div_actionslist').toggle();         });     }); }); </script>  <div class="div_actions">     <div class="div_actionsclick">actions</div>     <div class="clearboth"></div>     <div class="div_actionslist">         <br/>             <ul>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>             </ul>         <br/>     </div>     <br/><br/>     <div class="div_actionsclick">actions</div>     <div class="clearboth"></div>     <div class="div_actionslist">         <br/>             <ul>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>             </ul>         <br/>     </div>     <br/><br/> </div> 

wrap each click/list pair in div, try modification (note each unneeded, jquery bind matched elements anyway):

$('.div_actionsclick').each(function(){     $(this).click(function(){         $('.div_actionslist').toggle();     }); }); 

should be:

$('.div_actionsclick').click(function(){     $(this).parent().find('.div_actionslist').toggle(); }); 

basically error having because $('.divactionslist') looking on entire page , toggling divs class (which of them). grouping click , list div, enable jquery able find corresponding list/s inspecting dom nearby clicked button.

basically above find parent element of 1 clicked, .div_actionslist inside that, rather inside entire page.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -