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

Question

Скажем, у меня есть 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().

Answer 1

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

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

Answer 2

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

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

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

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

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

$('[data-selected]')

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

Answer 3

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

$.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);

Answer 4

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

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

Answer 5

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

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

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