Как добавить класс «active» к двум спискам одновременно при клике по item любого?

Question

[Сергей Третьяков]

идеология
Сделал дубликат вывода фильтра для повышения юзабилити.
Item много и страница длинная получается. Хочу предоставить пользователю возможность повторной сортировки вконце страницы.

задача
Сделать пункты активными по клику и в верхнем и нижнем списках.

детали
Оригинальный код для одного списка сортировки:

$('.filter li a').on('click', function(event){
				
				var $self = $(this);
				var $this = $(this).parent();
				
				if($this.hasClass('active')) {
					return;
				}

				$self.closest('ul').children().removeClass('active');
				$self.parent().addClass('active');

				$container.shuffle( 'shuffle', $this.data('group') );
				
				event.preventDefault();
			});

Попытка решения задачи:

var $sortlist = $('.item-sort a');

function unit() {

  var clikednax = (function() {
    $sortlist.each(function() {

      var $self = $(this);

      $self.closest('ul').children().removeClass('active');
      $self.parent().addClass('active');
    });

    return false;
  });

  $sortlist.on('click', function(event) {
    var $this = $(this).parent();

    if ($this.hasClass('active')) {
      return;
    }
    clikednax();

    $container.shuffle('shuffle', $this.data('group'));

    event.preventDefault();
  });
}
unit();

При нажатии на элемент добавляется класс .active в верхнем и нижнем фильтре. Но .each() пробегает по циклу и останавливается на последнем элементе смотреть jsfiddle

var $this = $(this).parent();
// переменная должна быть обязательно с методом .parent()
// иначе shuffle.js отказывается сортировать item

Как остановиться на "кликнутом" элементе? Прошу помощи.

Comments

[Алексей Ярков]

А что такое $container.shuffle?

[Сергей Третьяков]

Алексей Ярков:
$container - это переменная для html классов. Чтобы shuffle.js знал что именно сортировать.
var $container = $('.items');
$(window).load(function() {
var $sizer = $container.find('.shuffle__sizer');

$container.shuffle({
itemSelector: '.item',
sequentialFadeDelay: 150,
sizer: $sizer
});
});

Answer 1

[Bowen]

var className = 'active';
$('.sorting-items').on('click', 'a', function(){
    var g = $(this).parent().data('group');
    $('[data-group='+ g +']').addClass(className).siblings().removeClass(className);
    return false;
});

Comments

[Сергей Третьяков]

Bowen Спасибо Большое!

Answer 2

[Сергей Третьяков]

Итоговый рабочий код с небольшими исправлениями. Отказывался сортировать shuffle.js если возвращать false

var className = 'active';
			$('.sorting-items').on('click', 'a', function(event){
				var g = $(this).parent().data('group');
				var $this = $(this).parent();
				
				$('[data-group='+ g +']').addClass(className).siblings().removeClass(className);
				//return false;
				
				$container.shuffle( 'shuffle', $this.data('group') );
				event.preventDefault();
			});

Полный вариант от инициализации:

jQuery(document).ready(function($) {

	var $container 	= $('.items');
	
	$(window).load(function() {
		var $sizer = $container.find('.shuffle__sizer');

		$container.shuffle({
			itemSelector: '.item',
			sequentialFadeDelay: 150,
			sizer: $sizer
		});
	});
			
	$(window).load(function() {
		var $sizer = $container.find('.shuffle__sizer');

		$container.shuffle({
			itemSelector: '.item',
			sequentialFadeDelay: 150,
			sizer: $sizer
		});
	});


			
	var className = 'active';
	$('.sorting-items').on('click', 'a', function(event){
		var g = $(this).parent().data('group');
		var $this = $(this).parent();
		
		$('[data-group='+ g +']').addClass(className).siblings().removeClass(className);
		//return false;
		
		$container.shuffle( 'shuffle', $this.data('group') );
		event.preventDefault();
	});
		
});

Answer 3

[Игорь]

Вот

Малость не дочитал и сделал активными только по верхнему списку)))

$(".sorting-items").on('click', function(event) {
  var target= event.target.parentNode;

 
  target.classList.toggle('active');
  var atrr=target.getAttribute("data-group");    

$(".secondItemsList>.item-sort[data-group='"+atrr+"']").toggleClass('active');

  });

Comments

[Сергей Третьяков]

Спасибо за труд!