Jquery는 $ jquery.data ()가있는 모든 요소를 선택합니다.

Question 1

이전에 설정 한 요소 선택 jquery.data();

즉, .data('myAttr')이미 설정된 모든 요소를 선택합니다 .

해결책

데모 할 jsfiddle은 Fiddle입니다.

Question 2

당신은 할 수 있습니다

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

이것은 data-myAttr''와 같지 않은 속성을 가진 모든 요소를 선택합니다 (따라서 설정되어야합니다).

filter () 사용할 수도 있습니다.

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

Question 3

선택하는 가장 쉽고 간단한 방법은 다음과 같습니다.

$('[data-myAttr]')

추가 정보:

많은 것을 테스트했습니다.

$('[data-myAttr!=""]')모든 경우에 사용 이 작동하는 것은 아닙니다. 없는 요소 때문에 data-myAttr세트는, 자신의 것 data-myAttr같를 undefined하고 $('[data-myAttr!=""]')잘못이다,뿐만 아니라 사람들을 선택합니다.

Question 4

filter () 사용할 수 있습니다 .

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

Question 5

이 jQuery 선택기 확장을 사용할 수 있습니다. 요소 데이터 쿼리

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

Question 6

: data () 선택기 와 함께 JQuery UI를 사용할 수 있습니다 .

지정된 키 아래에 저장된 데이터가있는 요소를 선택합니다.

이 jsfiddle 에서 예제를 확인하십시오.

일치하는 모든 요소를 얻으려면 .data('myAttr')다음을 사용할 수 있습니다.

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

이 모두 요소에 대한 작업을해야 data-사용하여 저장된 데이터와 속성과 요소 $.data()때문에

jQuery 1.4.3부터 HTML 5 데이터 속성은 자동으로 jQuery의 데이터 객체로 가져옵니다.

그러나 이것은 잘 작동하지 않습니다. 이 jsfiddle을 확인 하면 두 번째로 선택기가 호출 될 때 두 요소와 일치해야하며 하나만 일치해야합니다. 이것은 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() 저장 경우 이것은 잘 작동하지만 그렇지 않은 경우 결과 일치에 포함되지 않습니다.

원하는 것이 사용자가 설정 한 데이터 정보가있는 요소 만 일치시키는 것이지만 그렇지 않은 경우 두 가지 옵션이 남아있는 경우 이것은 전혀 버그가 아닐 수 있습니다.

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>

스 니펫 확장

:data의사 선택기와 함께 jquery-ui를 사용하고 [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>

스 니펫 확장

Question 7

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

Question 8

~~이전에 설정 한 요소 선택 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/

Jquery는 $ jquery.data ()가있는 모든 요소를 ​​선택합니다.

Jquery는 $ jquery.data ()가있는 모든 요소를 선택합니다.