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


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

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

решение

jsfiddle для демострации - это Скрипка

7 78

7 ответов:

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

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

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

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

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

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

$('[data-myAttr]')

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

Я проверил много вещей.

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

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

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

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

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

вы можете использовать jQuery UI с :данные() селектор

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

Регистрация этот 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))

    $.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>
    
     
  2. используйте jQuery-ui с :data псевдоселектор и присоединиться к результатам выбора [data-myAttr] чтобы включить те, которые могут быть пропущены

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

     testSelector = function() {
       var matched = $(':data(test), [data-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>
     <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.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>
    
     
$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do somting with element
});

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