Necros Aeturnus Necros Aeturnus - 5 months ago 24
jQuery Question

addClass to last-child on multiple tab

I am trying to build a script to change the "current" class regarding my tabs. Since my if function is a bit tricky it calls multiple

<ul>
in a single page so that I am working on a way to just affect the last child. So far I got the functions working all that is bothering me is the

$(this).addClass('current');
$("#" + tab_id).addClass('current');


where i simply can not find a way to add a
ul:last-child


<script>
$(document).ready(function(){
$('ul.tabs:last-child li').click(function(){
var tab_id = $(this).attr('data-tab');

$('ul.tabs:last-child li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$("#" + tab_id).addClass('current');
});
});
</script>


Here is the html

<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<div id="tab-1" class="tab-content current">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<div id="tab-2" class="tab-content">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<div id="tab-3" class="tab-content">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
<div id="tab-4" class="tab-content">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</ul>

Answer

Change:

$("#" + tab_id).addClass('current');

...to...

$(this).next().addClass('current');

And it should work :)