Как грамотно оформить данный JS код?

Question

[Дмитрий Шведов]

$(document).ready(function() {
	
	$('.tab').click(function(){

	    var tabs = $(this).closest('.tabs');

	    // Удаляем классы active
	    $(this).siblings().removeClass('active');
	    tabs.children('.tabs-content').children('.tabs-content-item').removeClass('active');

	    // Добавляем классы active
	    $(this).addClass('active');
	    tabs.children('.tabs-content').children('.tabs-content-item').eq($(this).index()).addClass('active');
	})
	
});

Код работает отлично, но выглядит кустарно, можно ли оформить по другому?

Вот пример на codepen

Answer 1

[Михаил]

Как-то так

$(function() {
    $('.tab').on('click', function(e) {
        var $el = $(e.currentTarget);
        var $tabs = $el.closest('.tabs');
        var $content = $tabs.children('.tabs-content').children('.tabs-content-item');
        // Удаляем классы active
        $el.siblings().removeClass('active');
        $content.removeClass('active');

        // Добавляем классы active
        $el.addClass('active');
        $content.eq($el.index()).addClass('active');
    })

});

Comments

[Дмитрий Шведов]

А можно избавится от 2х children друг за другом?
Пробовал искать сразу нужные элементы так, но так не работает .eq
find('.tabs-content-item');

[Александр Лысенко]

Дмитрий Шведов: Я для собственного удобства переписал ваш код и у меня работает .eq() вместе с .find()

[Дмитрий Шведов]

AlexanderZe: Да, работает! Видно я что то делал не так.
Спасибо!

Answer 2

[TobiraSoe]

$(document).ready(function() {
  
  $('.tab').click(function(){

      var tabs = $(this).closest('.tabs');

      // Удаляем классы active
      $(this).siblings()
         .removeClass('active');
      tabs.children('.tabs-content')
         .children('.tabs-content-item')
         .removeClass('active');

      // Добавляем классы active
      $(this).addClass('active');
      tabs.children('.tabs-content')
         .children('.tabs-content-item')
         .eq($(this)
         .index())
         .addClass('active');
  })
  
});