Jquery выбирает все элементы, у которых есть $ jquery.data ()

96

Выберите элементы, которые я ранее установил с помощью jquery.data();

т.е. выбрать все элементы с .data('myAttr')уже установленными.

РЕШЕНИЕ

Jsfiddle для демонстрации - Fiddle

Аргиропулос Ставрос
источник

Ответы:

98

Ты мог бы сделать

$('[data-myAttr!=""]'); 

это выбирает все элементы, у которых есть атрибут, data-myAttrне равный '' (так что он должен быть установлен);

вы также можете использовать filter ()

$('*').filter(function() {
    return $(this).data('myAttr') !== undefined;
});
Никола Пелучетти
источник
68
Или просто:$('[data-myAttr]')
andlrc
4
Думал то же самое. Это не работает должным образом. см. это ДЕМО
gdoron поддерживает Монику
закрывающий 'отсутствует в первом фрагменте кода (не могу редактировать ответ напрямую)
Florent2
1
$ ('[data-myAttr! = ""]'); вернет элементы, которым он не назначен. Комментарий @NULL получает только те элементы, для которых он установлен.
arleslie
6
НЕПРАВИЛЬНО! правильное решение: $ ('[data-myAttr]') - см. ответ ниже для объяснения
BassMHL
75

Самый лучший и простой способ выбрать их:

$('[data-myAttr]')

Больше информации:

Много чего тестировал.

Использование $('[data-myAttr!=""]')работает не во всех случаях. Поскольку элементы, у которых нет data-myAttrнабора, будут иметь их data-myAttrравные undefinedи $('[data-myAttr!=""]')будут выбирать их, что неверно.

Ашкан Мобайен Хиабани
источник
4
Это работает только с атрибутами данных, определенными в разметке. Он НЕ работает с атрибутами данных, определенными через jQuery, см. Jsfiddle.net/2p7h0Lj8/1
Sophivorus
19

Вы можете использовать filter () :

var elements = $("*").filter(function() {
    return $(this).data("myAttr") !== undefined;
});
Фредерик Хамиди
источник
1
Собирался
Рори МакКроссан
1
Почему селектор атрибутов не работает? $('[data-myAttr]')?
gdoron поддерживает Монику
6
@gdoron, потому что data()форма получателя действительно читает data-атрибуты HTML5 , но форма установщика не создает и не обновляет их.
Frédéric Hamidi
ммм, так где он сохраняет данные? можешь дать мою ссылку? Я прочитал это «(все значения данных затем сохраняются внутри jQuery)». но где???
gdoron поддерживает Монику
3
@gdoron, данные сохраняются в глобальном кеше с ключом id, который связан с элементом через свойство expando.
Фредерик Хамиди,
17

Вы можете использовать это расширение jQuery Selector: запрос данных элемента

$(':data');       // All elements with data  
$(':not(:data)'); // All elements without data
Роберкулес
источник
В пользовательском интерфейсе jQuery это уже есть, поэтому некоторым может не потребоваться вызывать анонимную функцию. api.jqueryui.com/data-selector
arleslie
8

Вы можете использовать JQuery UI с селектором: data ()

Выбирает элементы, данные которых хранятся под указанным ключом.

Посмотрите этот jsfiddle для примера

Чтобы все элементы совпадали, .data('myAttr')вы можете использовать

var matches = $(':data(myAttr)');

Это должно работать как для элементов с data-атрибутами, так и для элементов с данными, хранящимися с использованием, $.data()потому что

Начиная с jQuery 1.4.3 атрибуты данных HTML 5 будут автоматически вставлены в объект данных jQuery.

Но это не очень хорошо работает. Отметьте этот jsfiddle и вы увидите, что при втором вызове селектора он должен соответствовать 2 элементам и соответствует только одному. Это связано с "ошибкой" в библиотеке jquery-ui.

Это взято из основного файла jquery-ui.

 $.extend( $.expr[ ":" ], {
    data: $.expr.createPseudo ?
        $.expr.createPseudo(function( dataName ) {
            return function( elem ) {
                return !!$.data( elem, dataName );
            };
        }) :
        // support: jQuery <1.8
        function( elem, i, match ) {
            return !!$.data( elem, match[ 3 ] );
        }
});

Как вы можете видеть, они используют $.data(elem, match)вместо этого, $(elem).data(match)что приводит к тому, что кеш не обновляется, если вы запрашиваете элементы с data-атрибутами. Если элемент был протестирован наdata() хранения, это работает хорошо, но в противном случае он не будет включен в результирующие совпадения.

Это может быть вовсе не ошибкой, если вы хотите сопоставить только элементы с информацией о данных, установленной вами, но если нет, у вас остается два варианта.

  1. Не используйте jquery-ui и не расширяйте собственный псевдоселектор $(:mydata(myAttr))

    $.extend($.expr[":"], {
       mydata: $.expr.createPseudo ?
       $.expr.createPseudo(function(dataName) {
          return function(elem) {
             return !!$(elem).data(dataName);
          };
       }) : function(elem, i, match) {
           return !!$(elem).data(match[3]);
       }
    });

  2. Используйте jquery-ui с :dataпсевдоселектором и объедините результаты выбора, [data-myAttr]чтобы включить те, которые могут быть пропущены

    var matches = $(':data(myAttr)', '[data-myAttr]')

devconcept
источник
Это было частью решения моей проблемы выбора элементов с атрибутами data- * без знания фактического идентификатора или имени атрибута данных. Я нашел способ расширить jQuery для этого в другом месте, но +1 здесь, чтобы фрагмент кода продемонстрировал практическое применение. Другие дают достаточно, чтобы намекнуть, но иногда вам нужно ПОКАЗАТЬ, как ИСПОЛЬЗОВАТЬ предоставленную информацию. Спасибо! :)
Брэндон Эллиотт
7
$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do something with the element
});
Халид
источник
2

Выберите элементы, которые я ранее установил с помощью jquery.data();


Вопрос в том, чтобы найти все элементы с определенным ключом, а не какие-либо данные.


Попробуйте использовать jQuery.data()

$(".myClass").each(function(i){
    if( i % 2 == 0 ){
        $(this).data("myAttr",i + 1);                
    }
});
    
var res = $(".myClass").map(function(i) {
    console.log($(this).data("myAttr"));
    return $.data(this, "myAttr") !== undefined ? this : null
});    

console.log(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>
<div class="myClass">4</div>
<div class="myClass">5</div>

jsfiddle http://jsfiddle.net/xynZA/142/

гость271314
источник
Спасибо за ответ. Вопрос в том, чтобы найти все элементы с определенным ключом, а не какие-либо данные.
Argiropoulos Stavros
@ArgiropoulosStavros Требуется ли возвращать элементы с установленным html data-*атрибутом, а также с jQuery.data()установленным?
guest271314