Click function applying to all elements with same class

Question

I have 2 sets of tabs on my page that share the same classes. I need my click function to only apply to the tab-menu thats clicked, but instead it applies to both. I know the answer lies in using "this" but I can't figure out how to plug it in

HTML:

<div className="tabbed-menu" id="tabs">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

<div className="tabbed-menu" id="tabs2">
<ul className="tab-list">
<li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li>
<li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li>
<li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li>
 </ul>
<div className="tab-container">
<div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div>
<div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div>
<div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div>
</div>
</div>

JS:

 $(document).ready(function() {
    if (!$('[data-tab-item]').hasClass('active').length){
        $('li[data-tab-item]').first().addClass('active');
        $('div[data-tab-item]').first().addClass('active');
    }   
    $(".tab-item").click(function(){
        var tabNumber = $(this).attr('data-tab-item');
        $('[data-tab-item]').removeClass('active');
        $('[data-tab-item='+ tabNumber +']').addClass('active');
    });
});

Answer 1

The callback function you pass to the click method can also receive a parameter in witch the event data is passed. The event data has a property called target. witch is the node on witch the event has been emitted. For your case you should not do this: $(this) but instead something like:

$(".tab-item").click(function(event){
  var tabNumber = $(event.target).attr('data-tab-item');
  $('[data-tab-item]').removeClass('active');
  $('[data-tab-item='+ tabNumber +']').addClass('active');
});

Answer 2

closest() will search for the closest parent. From there on you can find any element within that element.

 $(document).ready(function() { if (!$('[data-tab-item]').hasClass('active').length) { $('li[data-tab-item]').first().addClass('active'); $('div[data-tab-item]').first().addClass('active'); } $(".tab-item").click(function() { $this = $(this); $menu = $this.closest('.tabbed-menu'); $menu.find('[data-tab-item]').removeClass('active'); var tabNumber = $this.attr('data-tab-item'); $menu.find('[data-tab-item=' + tabNumber + ']').addClass('active'); }); }); 

 .tab-content { display: none; } .tab-content.active { display: block; } .active { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> I have 2 sets of tabs on my page that share the same classes. I need my click function to only apply to the tab-menu thats clicked, but instead it applies to both. I know the answer lies in using "this" but I can't figure out how to plug it in HTML: <div class="tabbed-menu" id="tabs"> <ul class="tab-list"> <li data-tab-item="1" class="tab-item"><a href="javascript:void(0)">Active Section</a></li> <li data-tab-item="2" class="tab-item"><a href="javascript:void(0)">Item Two</a></li> <li data-tab-item="3" class="tab-item"><a href="javascript:void(0)">Item Three</a></li> </ul> <div class="tab-container"> <div data-tab-item="1" id="tab1" class="tab-content"> <p>Content Goes Here</p> </div> <div data-tab-item="2" id="tab2" class="tab-content"> <p>Second Content Goes Here</p> </div> <div data-tab-item="3" id="tab3" class="tab-content"> <p>Third Content Goes Here</p> </div> </div> </div> <div class="tabbed-menu" id="tabs2"> <ul class="tab-list"> <li data-tab-item="1" class="tab-item"><a href="javascript:void(0)">Active Section</a></li> <li data-tab-item="2" class="tab-item"><a href="javascript:void(0)">Item Two</a></li> <li data-tab-item="3" class="tab-item"><a href="javascript:void(0)">Item Three</a></li> </ul> <div class="tab-container"> <div data-tab-item="1" id="tab1" class="tab-content"> <p>Content Goes Here</p> </div> <div data-tab-item="2" id="tab2" class="tab-content"> <p>Second Content Goes Here</p> </div> <div data-tab-item="3" id="tab3" class="tab-content"> <p>Third Content Goes Here</p> </div> </div> </div> 

Answer 3

Use the > selector which selects the child of the selected element. parent>child

 $(document).ready(function() { if (!$('#tabs>.tabb1>[data-tab-item]').hasClass('active').length){ alert("s"); $('#tabs>.tabb1>li[data-tab-item]').first().addClass('active'); $('#tabs>.tabb1>div[data-tab-item]').first().addClass('active'); } $("#tabs2>.tabb2>.tab-item").click(function(){ var tabNumber = $(this).attr('data-tab-item'); $('#tabs2>.tabb2>[data-tab-item]').removeClass('active'); $('#tabs2>.tabb2>[data-tab-item='+ tabNumber +']').addClass('active'); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div className="tabbed-menu" id="tabs"> <ul className="tab-list"> <li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li> <li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li> <li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li> </ul> <div className="tab-container"> <div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div> <div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div> <div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div> </div> </div> <div className="tabbed-menu" id="tabs2"> <ul className="tab-list"> <li data-tab-item="1" className="tab-item"><a href="javascript:void(0)">Active Section</a></li> <li data-tab-item="2" className="tab-item"><a href="javascript:void(0)">Item Two</a></li> <li data-tab-item="3" className="tab-item"><a href="javascript:void(0)">Item Three</a></li> </ul> <div className="tab-container"> <div data-tab-item="1" id="tab1" className="tab-content"><p>Content Goes Here</p></div> <div data-tab-item="2" id="tab2" className="tab-content"><p>Second Content Goes Here</p></div> <div data-tab-item="3" id="tab3" className="tab-content"><p>Third Content Goes Here</p></div> </div> </div>