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

Ответ 1

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

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

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

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

$('*').filter(function() {
    return $(this).data('myAttr') !== undefined;
});

Ответ 2

Лучший и простой способ их выбора:

$('[data-myAttr]')

Дополнительная информация:

Я много тестировал.

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

Ответ 3

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

var elements = $("*").filter(function() {
    return $(this).data("myAttr") !== undefined;
});

Ответ 4

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

$(':data');       // All elements with data  
$(':not(:data)'); // All elements without data

Ответ 5

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

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

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

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

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

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

Начиная с jQuery 1.4.3 атрибуты HTML 5 data- будут автоматически добавлены в объект данных 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)) свой собственный псевдоселектор $(: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]);
      }
   });
   

    // pseudoselector code
    $.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]);
        }
    });
    // end pseudoselector
   
    testSelector = function() {
      var matched = $(':mydata(test)'),
        results = $('#results');
      results.append('<div>You matched ' + matched.length + ' elements</div>');
      matched.css('border', 'black 3px solid');
      console.log(matched);
      console.log('You matched ' + matched.length + ' elements');
    };
   
    testSelector();
    $('#addData').click(function() {
      $(".bar").data('test', 'value2');
      testSelector();
    });
   
    

    .foo {
      background-color: red;
      color: white;
    }
    .bar {
      background-color: blue;
      color: white;
    }
    #addData {
      margin-top: 20px;
    }
   
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
      <span class="bar">without data attribute</span>
      <span class="foo" data-test="value1">with data attribute</span>
    </div>
    <button id="addData" type="button">Add data</button>
    <div id="results"></div>
   
    

Ответ 6

$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do something with the element
});

Ответ 7

Выберите элементы, которые я ранее установил с помощью 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>