[JQUERY] 데이터 속성으로 요소 선택

데이터 속성으로 요소 선택

해결법

1. ---

   1.

   $('*[data-customerID="22"]');
   

   당신은 *를 생략 할 수 있어야한다,하지만 난 당신이 사용중인 jQuery를 버전에 따라 올바르게 기억, 이것은 잘못된 결과를 얻을 수 있습니다.

   셀렉터 API와 호환 (document.querySelector가 {모든}) 속성 값 (22) 주위에 인용 부호가이 경우에 생략 될 수 있습니다.

   당신이 데이터로 작업하는 경우 또한, 당신의 jQuery를 스크립트에서 많은 속성, 당신은 속성 플러그인 HTML5 사용자 정의 데이터 사용을 고려할 수 있습니다. 이것은 당신이 .dataAttr ( 'foo는')를 사용하여 더 많은 읽을 수있는 코드를 작성할 수 있습니다 및 축소를 후 작은 파일 크기 결과는 (( '데이터 foo는') .attr 사용에 비해).

2. ---

   2.데이터 속성을 선택하는 방법에 대한 일반적인 규칙을 인터넷 검색을하고 싶은 사람들을 위해 :

   데이터 속성을 선택하는 방법에 대한 일반적인 규칙을 인터넷 검색을하고 싶은 사람들을 위해 :

   $ ( "[시험 데이터]") 단순히 데이터 속성을 가지고있는 요소를 선택한다은 (어떠한 속성의 값을 상관 없음). 포함 :

   <div data-test=value>attributes with values</div>
   <div data-test>attributes without values</div>
   

   $ ( '[데이터 테스트 ~ = "foo에"]') 데이터 속성이 foo에 포함되어 있지만, 같은 정확하지 않는 요소를 선택합니다 :

   <div data-test="foo">Exact Matches</div>
   <div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>
   

   $ ( "[시험 데이터 ="the_exact_value "] ') 데이터는 예를 들어, 정확한 값 the_exact_value 인 속성 모든 요소를 ​​선택한다 :

   <div data-test="the_exact_value">Exact Matches</div>
   

   하지만

   <div data-test="the_exact_value foo">This won't match</div>
   

3. ---

   3.$ 사용 ( '[데이터 무엇이든지 "myvalue를"=]') HTML 속성을하지만, 새로운 jQueries에, 당신은 $를 (...)를 사용합니다. 데이터가 (...) 데이터를 첨부 할 것을 그것을 보인다 아무것도를 선택합니다 이전의 대답에 표시된대로 따라서 .find에 의해 발견되지 않으며, 마법 브라우저 꼬추를 사용하고 HTML에 영향을주지 않습니다.

   $ 사용 ( '[데이터 무엇이든지 "myvalue를"=]') HTML 속성을하지만, 새로운 jQueries에, 당신은 $를 (...)를 사용합니다. 데이터가 (...) 데이터를 첨부 할 것을 그것을 보인다 아무것도를 선택합니다 이전의 대답에 표시된대로 따라서 .find에 의해 발견되지 않으며, 마법 브라우저 꼬추를 사용하고 HTML에 영향을주지 않습니다.

   (또한 바이올린 참조) (1.7.2+ 테스트) 확인 (더 완전 업데이트)

   var $container = $('<div><div id="item1"/><div id="item2"/></div>');
   
   // add html attribute
   var $item1 = $('#item1').attr('data-generated', true);
   
   // add as data
   var $item2 = $('#item2').data('generated', true);
   
   // create item, add data attribute via jquery
   var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
   $container.append($item3);
   
   // create item, "manually" add data attribute
   var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
   $container.append($item4);
   
   // only returns $item1 and $item4
   var $result = $container.find('[data-generated="true"]');
   

4. ---

   4.내가 jQuery를하지 않고 자바 스크립트 대답을 보지 못했다. 희망이 사람을 도움이됩니다.

   내가 jQuery를하지 않고 자바 스크립트 대답을 보지 못했다. 희망이 사람을 도움이됩니다.

   VAR 요소 document.querySelectorAll = ( '[데이터의 CustomerID = "22"] "); 요소 [0] .innerHTML = '는 그 일!; 테스트 를

5. ---

   5.데이터 속성 데이터 CUSTOMERID == (22) 모든 앵커를 선택하려면 해당 요소 유형으로 검색 범위를 제한 할 수는 A를 포함해야합니다. 큰 루프 또는 높은 주파수에서 데이터 속성 검색을 수행 성능 문제가 발생할 수있는 페이지에 많은 요소가있을 때.

   데이터 속성 데이터 CUSTOMERID == (22) 모든 앵커를 선택하려면 해당 요소 유형으로 검색 범위를 제한 할 수는 A를 포함해야합니다. 큰 루프 또는 높은 주파수에서 데이터 속성 검색을 수행 성능 문제가 발생할 수있는 페이지에 많은 요소가있을 때.

   $('a[data-customerID="22"]');
   

6. ---

   6.가져 오기 NodeList의 요소

   가져 오기 NodeList의 요소

   var elem = document.querySelectorAll('[data-id="container"]')
   

   HTML :

   첫 번째 요소를 가져옵니다

   var firstElem = document.querySelector('[id="container"]')
   

   HTML :

   있는 NodeList를 반환 노드의 컬렉션을 대상

   document.getElementById('footer').querySelectorAll('[data-id]')
   

   HTML :

   <div class="footer">
       <div data-id="12"></div>
       <div data-id="22"></div>
   </div>
   

   복수 (OR) 데이터 값을 기준으로 요소를 가져옵니다

   document.querySelectorAll('[data-section="12"],[data-selection="20"]')
   

   HTML :

   <div data-selection="20"></div>
   <div data-section="12"></div>
   

   조합 (AND)의 데이터 값에 기초하여 요소를 받기

   document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')
   

   HTML :

   <div data-prop1="12" data-prop2="20"></div>
   

   값으로 시작되는 항목을 가져 오기

   document.querySelectorAll('[href^="https://"]')
   

7. ---

   7.이와 같은 구성은 : $ ( "[데이터 XXX = 111]) 사파리 8.0에서 작동하지 않는다.

   이와 같은 구성은 : $ ( "[데이터 XXX = 111]) 사파리 8.0에서 작동하지 않는다.

   당신이 데이터가이 방법을 속성으로 설정하면 :.. $ ( 'DIV') 데이터 ( 'XXX', 111), 그것은 단지 당신이 데이터가이 같은 DOM에 직접 속성을 설정하면 작동합니다 : $ ( 'DIV') ATTR를 ( '데이터 - XXX ', 111).

   내가 jQuery를 팀에 최적화 된 가비지 콜렉터는 DOM 각 변경 데이터 속성에 재건 메모리 누수 무거운 작업을 방지 할 수 있기 때문에 생각합니다.

8. ---

   8.JQUERY 통해 필터 () 메소드

   JQUERY 통해 필터 () 메소드

   http://jsfiddle.net/9n4e1agn/1/

   HTML :

   <button   data-id='1'>One</button>
   <button   data-id='2'>Two</button>
   

   자바 스크립트 :

   $(function() {    
       $('button').filter(function(){
           return $(this).data("id")   == 2}).css({background:'red'});  
        });
   

9. ---

   9.이 크롬에서 작동하려면 값은 따옴표 또 한 쌍의가 없어야합니다.

   이 크롬에서 작동하려면 값은 따옴표 또 한 쌍의가 없어야합니다.

   그것은 단지 다음과 같은 예를 들어, 작동 :

   $('a[data-customerID=22]');
   

10. ---

    10.그것은 (DOM-속성을 통해 일명되지 않음)가 데이터 항목을 프로그래밍 방식에 부착되어 있는지 여부에 따라 필터 요소에 때때로 바람직입니다 :

    그것은 (DOM-속성을 통해 일명되지 않음)가 데이터 항목을 프로그래밍 방식에 부착되어 있는지 여부에 따라 필터 요소에 때때로 바람직입니다 :

    $el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();
    

    위의 작동하지만 매우 읽을 수 없습니다. 더 좋은 방법은 이런 종류의 테스트를위한 의사 선택기를 사용하는 것입니다 :

    $.expr[":"].hasData = $.expr.createPseudo(function (arg) {
        return function (domEl) {
            var $el = $(domEl);
            return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
        };
    });
    

    이제 우리는 더 유창하게 읽을 수있는 뭔가를 원래의 문을 리팩토링 할 수 있습니다 :

    $el.filter(":hasData('foo-bar')").doSomething();
    

11. ---

    11.: 제 3 자 libs와하지 않고 그것을 할 수 있습니다 (HTML5의 시대에서) 지금까지 - 그냥 '생활 수준'의 일부 기능을 가진 모든 해답을 완료

    : 제 3 자 libs와하지 않고 그것을 할 수 있습니다 (HTML5의 시대에서) 지금까지 - 그냥 '생활 수준'의 일부 기능을 가진 모든 해답을 완료

from https://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute by cc-by-sa and MIT license