Элемент фильтра на основе ключа / значения .data ()

Скажем, у меня есть 4 элемента div с классом .navlink, которые при нажатии используются .data()для установки вызываемого ключа 'selected'на значение true:

$('.navlink')click(function() { $(this).data('selected', true); })

Каждый раз, когда .navlinkнажимается новое , я хотел бы сохранить ранее выбранное navlinkдля последующих манипуляций. Есть ли быстрый и простой способ выбрать элемент на основе того, что было сохранено с использованием .data()?

Кажется, нет никаких фильтров jQuery :, которые подходят под все требования, и я попробовал следующее (в том же событии щелчка), но по какой-то причине это не работает:

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

Я знаю, что есть другие способы сделать это, но сейчас мне просто любопытно, можно ли это сделать с помощью .data().

ваш фильтр будет работать, но вам нужно вернуть true для совпадающих объектов в функции, переданной фильтру, чтобы он их захватил.

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

Просто для записи вы можете фильтровать данные с помощью jquery (этот вопрос довольно старый, и с тех пор jQuery эволюционировал, поэтому также правильно написать это решение):

$('.navlink[data-selected="true"]');

или лучше (по производительности):

$('.navlink').filter('[data-selected="true"]');

или, если вы хотите получить все элементы с помощью data-selectedset:

$('[data-selected]')

Обратите внимание, что этот метод будет работать только с данными, которые были установлены через атрибуты html. Если вы установите или измените данные с помощью .data()вызова, этот метод больше не будет работать.

Мы можем довольно легко сделать плагин:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

Использование (установка переключателя):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

Я заметил две вещи (хотя они могут быть ошибками, когда вы это записали).

1. Вы пропустили точку в первом примере ( $('.navlink').click)
2. Чтобы фильтр работал, вы должны вернуть значение ( return $(this).data("selected")==true)

Похоже, работы больше, чем ее стоит.

1) Почему бы просто не иметь единственную переменную JavaScript, которая хранит ссылку на текущий выбранный объект element \ jQuery.

2) Почему бы не добавить класс к текущему выбранному элементу. Затем вы можете запросить в DOM класс «.active» или что-то в этом роде.