[JQUERY] jQuery를 어떻게 데이터 - 속성 값을 기반으로 요소를 찾는 방법은?

jQuery를 어떻게 데이터 - 속성 값을 기반으로 요소를 찾는 방법은?

해결법

1. ---

   1.당신은 특성으로 현재의 가치를 주입해야 선택 같음 :

   당신은 특성으로 현재의 가치를 주입해야 선택 같음 :

   $("ul").find(`[data-slide='${current}']`)
   

   오래된 자바 스크립트 환경 (ES5 이하)의 경우 :

   $("ul").find("[data-slide='" + current + "']"); 
   

2. ---

   2.이런 경우 사용자는 여기에서 데이터 속성에 의해 쿼리에 대한 짧은 방법의 모든 것을 입력하지 않으 :

   이런 경우 사용자는 여기에서 데이터 속성에 의해 쿼리에 대한 짧은 방법의 모든 것을 입력하지 않으 :

   $("ul[data-slide='" + current +"']");
   

   참고 : http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

3. ---

   3.로 검색하는 경우 [데이터 X = ...]가 jQuery.data (..) 세터 작동하지 않으며,주의 :

   로 검색하는 경우 [데이터 X = ...]가 jQuery.data (..) 세터 작동하지 않으며,주의 :

   $('<b data-x="1">'  ).is('[data-x=1]') // this works
   > true
   
   $('<b>').data('x', 1).is('[data-x=1]') // this doesn't
   > false
   
   $('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
   > true
   

   대신 이것을 사용할 수 있습니다 :

   $.fn.filterByData = function(prop, val) {
       return this.filter(
           function() { return $(this).data(prop)==val; }
       );
   }
   
   $('<b>').data('x', 1).filterByData('x', 1).length
   > 1
   

4. ---

   4.

   document.querySelectorAll(`[data-slide='${current}']`);
   

   나는 질문 JQuery와에 대해 알고 있지만, 독자는 순수한 JS 방법을 할 수 있습니다.

5. ---

   5.내가 jQuery를에 싸이코 BRM의 filterByData 확장에 개선.

   내가 jQuery를에 싸이코 BRM의 filterByData 확장에 개선.

   이전 확장 키 - 값 쌍을 검색 할 경우,이 확장하면 추가로 그 값에 관계없이, 데이터 속성의 존재를 검색 할 수 있습니다.

   (function ($) {
   
       $.fn.filterByData = function (prop, val) {
           var $self = this;
           if (typeof val === 'undefined') {
               return $self.filter(
                   function () { return typeof $(this).data(prop) !== 'undefined'; }
               );
           }
           return $self.filter(
               function () { return $(this).data(prop) == val; }
           );
       };
   
   })(window.jQuery);
   

   용법:

   $('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
   $('<b>').data('x', 1).filterByData('x').length       // output: 1
   

   // 테스트 데이터 extractData 함수 () { 로그 ( '데이터 소품 = 발 ...'+ $ ( 'DIV') filterByData ( '소품', '발') 길이..) 로그 ( '데이터 소품 ..........'+ $ ( 'DIV') filterByData ( '소품') 길이..) 로그 ( '........ 데이터 랜덤'+ $ ( 'DIV') filterByData ( '임의') 길이..) 로그 ( '데이터 테스트 ..........'+ $ ( 'DIV') filterByData ( '테스트') 길이..) 로그 ( '테스트 데이터 = anyval ...'+ $ ( 'DIV') filterByData ( "시험 ','anyval ')의 길이..); } $ (문서) .ready (함수 () { . $ ( '#의 B5')의 데이터 ( "시험 ','anyval '); }); // 실제 확장 (함수 ($) { $ .fn.filterByData = 기능 (소품, 발) { var에 $ 자체는이 =; 경우 (대해서 typeof 브로 === '미정의') { ($ self.filter을 반환 함수() { 대해서 typeof $ (이) .DATA (소품)을 반환 == '정의되지 않은'! }); } ($ self.filter을 반환 함수() { $를 반환 (이) .DATA (소품) == 발; }); }; }) (window.jQuery); // 단지 빠르게 로그인하기 로그 함수 (TXT) { 경우 (window.console && CONSOLE.LOG) { CONSOLE.LOG (TXT); //} 다른 { // 경고 ( '당신은 결과를 확인하는 콘솔이 필요합니다'); } $ ( "# 결과") APPEND (TXT + "
   ."); } #bPratik { 글꼴 - 가족 : 고정 폭; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

   설정

   데이터가 인라인 첨가 :: 데이터 소품 = "발"를

   데이터가 인라인 첨가 :: 데이터 소품 = "발"를

   데이터가 인라인 첨가 :: 데이터 소품 = "diffval"

   데이터가 인라인 첨가 :: 테스트 데이터 = "발"를

   데이터 jQuery를 통해 첨가 될

   출력

   ---

   <버튼의 onclick = "extractData ()"> 공개

   또는 바이올린 : http://jsfiddle.net/PTqmE/46/

6. ---

   6.jQuery를 및 데이터 - * 속성을 사용하여 요소를 가져 오는 동안 저도 같은 문제에 직면했다.

   jQuery를 및 데이터 - * 속성을 사용하여 요소를 가져 오는 동안 저도 같은 문제에 직면했다.

   그래서 당신의 참조를 위해 짧은 코드는 여기에 있습니다 :

   이건 내 HTML 코드입니다 :

   <section data-js="carousel"></section>
   <section></section>
   <section></section>
   <section data-js="carousel"></section>
   

   이것은 내 jQuery를 선택입니다 :

   $('section[data-js="carousel"]');
   // this will return array of the section elements which has data-js="carousel" attribute.
   

7. ---

   7.

   $("ul").find("li[data-slide='" + current + "']");
   

   나는이 더 잘 작동 할 수 있습니다 희망

   감사

8. ---

   8.이 선택기 $ ( "UL [데이터 슬라이드 = '"+ 전류 + "']"); 다음과 같은 구조를 위해 작동합니다 :

   이 선택기 $ ( "UL [데이터 슬라이드 = '"+ 전류 + "']"); 다음과 같은 구조를 위해 작동합니다 :

   <ul><li data-slide="item"></li></ul>  
   

   하면서 $ ( "UL [데이터 슬라이드 = '"+ 전류 + "']"); 작동합니다 :

   • ---

     9.사전에 요소 유형을 알고 있기없이이 작업을하는 방법에 대한 자신의 원래의 질문에, 다시가는, 다음이 수행합니다

     사전에 요소 유형을 알고 있기없이이 작업을하는 방법에 대한 자신의 원래의 질문에, 다시가는, 다음이 수행합니다

     $(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");
     

   from https://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value by cc-by-sa and MIT license