селектор даних jquery

Мені потрібно вибрати елементи на основі значень, що зберігаються в .data()об'єкті елемента . Як мінімум, я б хотів вибрати властивості даних верхнього рівня за допомогою селекторів, можливо так:

$('a').data("category","music");
$('a:data(category=music)');

Або, можливо, селектор буде у форматі звичайного атрибута:

$('a[category=music]');

Або у форматі атрибутів, але зі специфікатором, щоб вказати, він знаходиться у .data():

$('a[:category=music]');

Я вважав, що реалізація Джеймса Падолсі виглядає просто, але добре. Селектор формати вище дзеркальних методів, показаних на цій сторінці. Також є цей патч Sizzle .

З якоїсь причини я пригадую, що читав назад, що jQuery 1.4 включає підтримку селекторів значень .data()об'єкта jquery . Однак тепер, коли я його шукаю, я не можу його знайти. Можливо, це був просто запит на функцію, який я бачив. Чи є підтримка в цьому, і я просто не бачу цього?

В ідеалі я хотів би підтримувати підвластивості в даних (), використовуючи крапкові позначення. Подобається це:

$('a').data("user",{name: {first:"Tom",last:"Smith"},username: "tomsmith"});
$('a[:user.name.first=Tom]');

Я також хотів би підтримати декілька селекторів даних, де знаходяться лише елементи із ВСІМ вказаними селекторами даних. Звичайний множинний селектор jquery робить операцію АБО. Наприклад, $('a.big, a.small')вибирає aтеги з класом bigабо small). Я шукаю І, можливо, так:

$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');

Нарешті, було б чудово, якби оператори порівняння та функції регулярного вибору були доступними на селекторах даних. Так $(a[:artist.id>5000])було б можливо. Я розумію, що, напевно, я міг би зробити багато з цього, використовуючи filter(), але було б непогано мати простий формат вибору.

Які рішення доступні для цього? Чи є Падольсей Джейма найкращим рішенням на даний момент? Я хвилююсь насамперед щодо продуктивності, а також у додаткових функціях, таких як точкове позначення підменю та множинні селектори даних. Чи є інші реалізації, які підтримують ці речі або є в чомусь кращими?

Я створив новий dataселектор, який повинен дозволяти вам робити вкладені запити та умови AND. Використання:

$('a:data(category==music,artist.name==Madonna)');

Шаблон:

:data( {namespace} [{operator} {check}]  )

"Оператор" і "Перевірка" не є обов'язковими. Таким чином, якщо у вас є тільки :data(a.b.c)це буде просто перевірити на truthiness з a.b.c.

Доступні оператори ви можете побачити в коді нижче. Серед них те, ~=що дозволяє тестувати регулярні вирівнювання:

$('a:data(category~=^mus..$,artist.name~=^M.+a$)');

Я перевірив його з кількома варіаціями, і, здається, він працює досить добре. Я, мабуть, незабаром додам це як репортаж Github (з повним тестовим набором), тому пильнуйте!

Код:

(function(){

    var matcher = /\s*(?:((?:(?:\\\.|[^.,])+\.?)+)\s*([!~><=]=|[><])\s*("|')?((?:\\\3|.)*?)\3|(.+?))\s*(?:,|$)/g;

    function resolve(element, data) {

        data = data.match(/(?:\\\.|[^.])+(?=\.|$)/g);

        var cur = jQuery.data(element)[data.shift()];

        while (cur && data[0]) {
            cur = cur[data.shift()];
        }

        return cur || undefined;

    }

    jQuery.expr[':'].data = function(el, i, match) {

        matcher.lastIndex = 0;

        var expr = match[3],
            m,
            check, val,
            allMatch = null,
            foundMatch = false;

        while (m = matcher.exec(expr)) {

            check = m[4];
            val = resolve(el, m[1] || m[5]);

            switch (m[2]) {
                case '==': foundMatch = val == check; break;
                case '!=': foundMatch = val != check; break;
                case '<=': foundMatch = val <= check; break;
                case '>=': foundMatch = val >= check; break;
                case '~=': foundMatch = RegExp(check).test(val); break;
                case '>': foundMatch = val > check; break;
                case '<': foundMatch = val < check; break;
                default: if (m[5]) foundMatch = !!val;
            }

            allMatch = allMatch === null ? foundMatch : allMatch && foundMatch;

        }

        return allMatch;

    };

}());

На даний момент я вибираю так:

$('a[data-attribute=true]')

Що, здається, працює чудово, але було б добре, якби jQuery зміг вибрати за цим атрибутом без префікса "data-".

Я не перевіряв це з використанням даних, що додаються до елементів за допомогою jQuery динамічно, так що це може бути крахом цього методу.

Ви також можете використовувати просту функцію фільтрації без плагінів. Це не саме те, що ви хочете, але результат той самий:

$('a').data("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});

$('a').filter(function() {
    return $(this).data('user') && $(this).data('user').name.first === "Tom";
});

Я хочу попередити вас, що $('a[data-attribute=true]')не працює, відповідно до відповіді Ешлі, якщо ви додали дані до елемента DOM за допомогою функції data ().

Він працює так, як можна було очікувати, якщо ви додали фактичний attr даних у свій HTML, але jQuery зберігає дані в пам’яті, тому результати, з яких ви отримаєте, $('a[data-attribute=true]')були б невірними.

Вам потрібно буде використовувати плагін даних http://code.google.com/p/jquerypluginsblog/ , використовувати filterрішення Дмитрія або зробити $ .each над усіма елементами і перевірити .data () ітеративно

Є :data()плагін для фільтру, який робить саме це :)

Деякі приклади на основі вашого запитання:

$('a:data("category=music")')
$('a:data("user.name.first=Tom")');
$('a:data("category=music"):data("artist.name=Madonna")');
//jQuery supports multiple of any selector to restrict further, 
//just chain with no space in-between for this effect

Продуктивність не буде надзвичайно великою порівняно з можливим , вибір $._cacheта захоплення відповідних елементів - це найшвидший, але набагато більш крутий і не дуже "jQuery-ey" з точки зору того, як ви дістанетесь до речі (зазвичай ви входите зі сторони елемента). Зверху голови я не впевнений, що це все-таки найшвидше, оскільки процес переходу від унікального Id до елемента перекручений сам по собі в плані продуктивності.

Селектор порівняння, про який ви згадали, найкраще робити в програмі .filter(), вбудованої підтримки для цього в плагіні немає, хоча ви можете додати його без особливих проблем.

Ви можете встановити data-*атрибут на в'язі за допомогою attr(), а потім вибрати, використовуючи цей атрибут:

var elm = $('a').attr('data-test',123); //assign 123 using attr()
elm = $("a[data-test=123]"); //select elm using attribute

а тепер для цього в'яза і те, attr()і data()дасть 123 :

console.log(elm.attr('data-test')); //123
console.log(elm.data('test')); //123

Однак якщо ви зміните значення на 456 за допомогою attr(), воно data() все одно буде 123 :

elm.attr('data-test',456); //modify to 456
elm = $("a[data-test=456]"); //reselect elm using new 456 attribute

console.log(elm.attr('data-test')); //456
console.log(elm.data('test')); //123

Тож, як я розумію, здається, вам, мабуть, слід уникати переплутань attr()та data()команд у вашому коді, якщо цього не потрібно. Оскільки, attr()здається, відповідає безпосередньо DOM, тоді як data()взаємодіє з «пам'яттю», хоча його початкове значення може бути від DOM. Але ключовим моментом є те, що вони зовсім не обов'язково синхронізуються.

Тому просто будьте обережні.

У будь-якому випадку, якщо ви не змінюєте data-*атрибут у DOM або в пам'яті, у вас не виникне проблем. Незабаром ви почнете змінювати значення, коли можливі проблеми.

Завдяки @Clarence Liu на відповідь @ Ash, а також цей пост .

$('a[data-category="music"]')

Це працює. Див. Атрибут рівний селектору [ім'я = ”значення”] .

Якщо ви також використовуєте jQueryUI, ви отримуєте з ним (просту) версію :dataселектора, яка перевіряє наявність елемента даних, тому ви можете зробити щось на зразок $("div:data(view)"), або $( this ).closest(":data(view)").

Дивіться http://api.jqueryui.com/data-selector/ . Я не знаю, як довго у них це було, але воно є зараз!

Ось плагін, який спрощує життя https://github.com/rootical/jQueryDataSelector

Використовуйте його так:

data selector           jQuery selector
  $$('name')              $('[data-name]')
  $$('name', 10)          $('[data-name=10]')
  $$('name', false)       $('[data-name=false]')
  $$('name', null)        $('[data-name]')
  $$('name', {})          Syntax error