jQuery: Limit the scope of a jQuery selector to avoid selecting other selectors that are not children -

i have made content shield (i.e. tabs) jquery. , works perfectly.

i know want put second 1 on page , wrap them both within larger content shield. however, when click links of first 1 starts effecting second one.

this overview of html

<div class="taptabs pages">   <nav class="content-follower tapnav ui-ticklist cr-nav"> [ul navigation switch between content shield 1 & 2] </nav>   <div class="taptabs page">     <nav class="content-follower tapnav ui-ticklist cr-nav"> [ul tabs content sheild 1]       </ul>     </nav>     <div class="pages">       <div class="page">         content sheild 1 - section       </div>       <div class="page">         content sheild 1 - section b       </div>     </div>   </div>   <div class="taptabs page">     <nav class="content-follower tapnav ui-ticklist cr-nav"> [ul tabs content sheild 2]       </ul>     </nav>     <div class="pages">       <div class="page">         content sheild 2 - section       </div>       <div class="page">         content sheild 2 - section b       </div>     </div>   </div> </div> 

this jquery:

(function ($) { $(document).ready(function () {      $(".taptabs .tapnav li").live('click', function () {         $(".page").hide().eq($(this).index()).show().addclass("animated").addclass("fadeinleft");     }).eq(0).addclass('selected');  });  })(jquery); 

here jsfiddle

obviously, problem taptabs/tapnav class not specific each section. thought use either closest() or children() limit selector, not sure how integrate code, navigation selects pages within own section.

you can try this. on click event obtain correct parent , use filter .page selector.

$(".taptabs .tapnav li").on('click', function()         {             taptab = $(this).parents(".taptabs").get(0);              $(".page",taptab).hide().eq($(this).index()).show().addclass("animated").addclass("fadeinleft");         }).eq(0).addclass('selected');          }); 

http://jsfiddle.net/vnfra/1/