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

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

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

즉, 다음과 같은 모든 요소를 선택.data('myAttr')이미 설정되어 있습니다.

해결책

기분을 가라앉힐 jsfiddle은 Fiddle입니다.

당신은 할 수 있습니다.

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

속성을 가진 모든 요소를 선택합니다.data-myAttr"와 동일하지 않습니다. (따라서 설정된 것이어야 합니다.) (jQuery를 경유하지 않고 HTML에 데이터 속성이 설정된 요소에 한함)

필터()를 사용할 수도 있습니다(jQuery에서 설정된 데이터 속성에 대해 작동함).

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

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

$('[data-myAttr]')

자세한 정보:

여러 가지 테스트를 해봤습니다.

사용.$('[data-myAttr!=""]')모든 경우에 효과가 있는 것은 아닙니다.왜냐하면 없는 요소들은data-myAttr세트, 그들의 것을 가질 것입니다.data-myAttr와 대등한undefined그리고.$('[data-myAttr!=""]')이 항목도 선택합니다. 이는 올바르지 않습니다.

필터()를 사용할 수 있습니다.

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

다음 jQuery Selector 확장을 사용할 수 있습니다.요소 데이터 조회 중

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

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

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

예를 들어 이 jsfiddle을 확인합니다.

모든 원소를 일치시키는 방법.data('myAttr')사용가능

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

이는 다음과 같은 두 요소 모두에 대해 작동해야 합니다.data-속성 및 요소(데이터 저장 시)$.data()왜냐면

jQuery 1.4.3 HTML 5 data-attribute는 jQuery의 data object에 자동으로 풀인됩니다.

하지만 이것은 잘 작동하지 않습니다.이 jsfiddle을 확인하면 셀렉터가 두 번째로 호출될 때 2개의 요소와 일치해야 하며 하나만 일치한다는 것을 알 수 있습니다.이것은 jquery-ui 도서관의 "bug" 때문입니다.

이것은 핵심 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 something with the element
});

이전에 설정한 요소를 선택합니다. 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/

언급URL : https://stackoverflow.com/questions/9499998/jquery-select-all-elements-that-have-jquery-data