jquery добавить числовой класс к элементу на основе текущего класса другого элемента

Question

У меня есть следующий HTML

<ul id="tabs">
    <li>1</li>
    <li>2</li>
    <li>etc...</li>
</ul> 

И следующую функцию jquery, которую я использую, чтобы добавить "кнопки" для перемещения по "вверх" или "вниз" списка, в то время как только "показывает" текущий элемент:

$('#tabs li').first().attr('class', 'current');

$('#tabs li').each(function(i) {
    i = i + 1;

$(this).attr('id', 'tab-' + i);

if(i !== $('#tabs li').size()) {
    $(this).append('<a class="tabPagination next floor-up" rel="tab-' + (i + 1) + '" href="/keyplate/' + (i + 1) + '">Up</a>');
    }
    if(i !== 1) {
        $(this).append('<a class="tabPagination next floor-down" rel="tab-' + (i - 1) + '" href="/keyplate/' + (i - 1) + '">Down</a>');
    }                
});            

$('#tabs li[class!="current"]').hide();

$(document).on("click", "a.tabPagination", function(){
    $('.current').removeAttr('class');
    $('#tabs li[class!="current"]').hide();    
    $('#' + $(this).attr('rel')).show(); 

});

У меня есть еще один div:

<div id="tower"></div>

Что мне нужно сделать, это добавить класс в #tower div на основе выбранного в данный момент элемента #tab. Так, например, если мы находимся на #tab li = 2, то #tower div получит class="active_level_2". Другими словами, возьмите значение элемента списка "текущий" #tab и используйте его для создания "active_level_#".

Заранее спасибо!

Answer 1

Вы можете получить атрибут rel и разделить его, чтобы получить последний номер, чтобы использовать для active_level_ учебный класс. Мы также можем потянуть $(this) в переменную сейчас, так как она используется более одного раза.

jsFiddle

$(document).on("click", "a.tabPagination", function(){
    var tab = $(this);
    $('.current').removeAttr('class');
    $('#tabs li[class!="current"]').hide();    
    $('#' + tab.attr('rel')).show(); 
    for (var i = 1; i <= 6; i++)
        $('#tower').removeClass('active-level-' + i);
    $('#tower').addClass('active_level_' + tab.attr('rel').split('-')[1]);
});

tab.attr('rel').split('-')[1] получит вкладки rel атрибут, разделите строку на две части в - использование персонажа split() и получить вторую часть, чтобы вернуть номер, который мы хотим.