[JQUERY] JQuery와 데이터 셀렉터

JQuery와 데이터 셀렉터

해결법

1. ---

   1.나는 중첩 된 쿼리 및 약관을 수행 할 수 있도록해야 새로운 데이터 선택기를 만들었습니다. 용법:

   나는 중첩 된 쿼리 및 약관을 수행 할 수 있도록해야 새로운 데이터 선택기를 만들었습니다. 용법:

   $('a:data(category==music,artist.name==Madonna)');
   

   패턴은 다음과 같습니다

   :data( {namespace} [{operator} {check}]  )
   

   "연산자"및 "체크"는 선택 사항입니다. 당신은 그래서, 만약 : 데이터 (A.B.C)를 단순히 주류 통제위원회 소속의 truthiness를 확인합니다

   아래 코드에서 사용할 수있는 연산자를 볼 수 있습니다. 그들 사이 정규식 테스트 할 수있는 ~ =입니다 :

   $('a:data(category~=^mus..$,artist.name~=^M.+a$)');
   

   나는 몇 가지 변화와 함께 테스트를했는데 꽤 잘 작동하는 것 같다. Github에서이 (전체 테스트 스위트로) 빨리 REPO 나는 아마 그렇게보고를 계속,이를 추가 할 것입니다!

   코드:

   (function(){
   
       var matcher = /\s*(?:((?:(?:\\\.|[^.,])+\.?)+)\s*([!~><=]=|[><])\s*("|')?((?:\\\3|.)*?)\3|(.+?))\s*(?:,|$)/g;
   
       function resolve(element, data) {
   
           data = data.match(/(?:\\\.|[^.])+(?=\.|$)/g);
   
           var cur = jQuery.data(element)[data.shift()];
   
           while (cur && data[0]) {
               cur = cur[data.shift()];
           }
   
           return cur || undefined;
   
       }
   
       jQuery.expr[':'].data = function(el, i, match) {
   
           matcher.lastIndex = 0;
   
           var expr = match[3],
               m,
               check, val,
               allMatch = null,
               foundMatch = false;
   
           while (m = matcher.exec(expr)) {
   
               check = m[4];
               val = resolve(el, m[1] || m[5]);
   
               switch (m[2]) {
                   case '==': foundMatch = val == check; break;
                   case '!=': foundMatch = val != check; break;
                   case '<=': foundMatch = val <= check; break;
                   case '>=': foundMatch = val >= check; break;
                   case '~=': foundMatch = RegExp(check).test(val); break;
                   case '>': foundMatch = val > check; break;
                   case '<': foundMatch = val < check; break;
                   default: if (m[5]) foundMatch = !!val;
               }
   
               allMatch = allMatch === null ? foundMatch : allMatch && foundMatch;
   
           }
   
           return allMatch;
   
       };
   
   }());
   

2. ---

   2.순간 나는이 같은 선택 해요 :

   순간 나는이 같은 선택 해요 :

   $('a[data-attribute=true]')
   

   어느 단지 벌금을 작동하는 것 같다,하지만 jQuery를이 '데이터 -'접두사없이 그 속성에 의해 선택할 수 있다면 그것은 좋은 것입니다.

   즉,이 방법에 낙하 될 수 있도록 I는 jquery 동적 요소를 통해 추가 데이터를이 시험하지 않았다.

3. ---

   3.또한 어떤 플러그인없이 간단한 필터링 기능을 사용할 수 있습니다. 이것은 정확하게 당신이 원하는 것이 아닙니다하지만 결과는 동일합니다 :

   또한 어떤 플러그인없이 간단한 필터링 기능을 사용할 수 있습니다. 이것은 정확하게 당신이 원하는 것이 아닙니다하지만 결과는 동일합니다 :

   $('a').data("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});
   
   $('a').filter(function() {
       return $(this).data('user') && $(this).data('user').name.first === "Tom";
   });
   

4. ---

   4.나는 당신을 경고 할 $이 ( 'A [= 실제 데이터 속성])은 데이터 () 함수를 통해 DOM 요소에 데이터를 첨부하는 경우, 애슐리의 답변에 따라,하지 작업을 수행합니다.

   나는 당신을 경고 할 $이 ( 'A [= 실제 데이터 속성])은 데이터 () 함수를 통해 DOM 요소에 데이터를 첨부하는 경우, 애슐리의 답변에 따라,하지 작업을 수행합니다.

   그것은 당신이 당신의 HTML의 실제 데이터 ATTR를 추가 한 경우 당신은 기대할 수 있지만, jQuery를 저장하면 $에서 얻을하려는 결과 수 있도록 메모리에 데이터 ( '는 [데이터 속성 = true로]') 않을 것으로 작동 정확.

   당신은 반복적으로) (http://code.google.com/p/jquerypluginsblog/ 플러그인 데이터를 사용 드미트리의 필터 솔루션을 사용하거나 모든 요소를 ​​통해 $의 .each을하고 .DATA를 확인해야합니다

5. ---

   5.다만이 작업을 수행 데이터 () 필터 플러그인 : : a는있다

   다만이 작업을 수행 데이터 () 필터 플러그인 : : a는있다

   귀하의 질문에 따라 몇 가지 예 :

   $('a:data("category=music")')
   $('a:data("user.name.first=Tom")');
   $('a:data("category=music"):data("artist.name=Madonna")');
   //jQuery supports multiple of any selector to restrict further, 
   //just chain with no space in-between for this effect
   

   성능은 $ ._ 캐시에서 선택, 무엇이 가능한지에 비해 매우 큰 될 것하고 해당 요소를 잡는 것은 지금까지 가장 빠른 것입니다,하지만 어떻게 측면에서 매우 "jQuery를-도망"더 많은 약 내내하지하지 않습니다 당신이 물건에 도착 (보통 요소 측면에서 와서). 내 머리의 일 정상, 나는 요소에 고유 ID로가는 프로세스가 성능면에서 그 자체로 뒤얽힌 때문에 확인이 가장 빠른 어쨌든 아니에요.

   당신은 문제를 많이하지 않고 그것을 추가 할 수 있지만 당신이 언급 한 비교 선택기, 플러그인이 지원에 내장, 더있다)을 .filter (에서 할 최고의 수 없습니다.

6. ---

   6.당신은 ATTR ()를 사용하여 느릅 나무에 데이터 - * 속성을 설정 한 다음 그 속성을 사용하여 선택할 수 있습니다 :

   당신은 ATTR ()를 사용하여 느릅 나무에 데이터 - * 속성을 설정 한 다음 그 속성을 사용하여 선택할 수 있습니다 :

   var elm = $('a').attr('data-test',123); //assign 123 using attr()
   elm = $("a[data-test=123]"); //select elm using attribute
   

   이제 그 느릅 모두 ATTR () 및 데이터 () (123)을 수득 할 경우 :

   console.log(elm.attr('data-test')); //123
   console.log(elm.data('test')); //123
   

   당신이 값을 수정할 경우, 여전히 123이 될 것이다 ATTR (), 데이터 ()를 사용하여 456 일합니다

7. ---

   7.

   $('a[data-category="music"]')
   

   효과가있다. 특성을 참조 [= "값을"이름] 선택기 같음.

8. ---

   8.당신은 또한 jQueryUI를 사용하는 경우, 당신은의 (간단한) 버전을 얻을 : 그것으로 데이터 선택기를 그 데이터 항목의 존재를 확인, 당신은 $ 같은 ( "DIV : 데이터 (보기)") 할 수 있도록, 또는 $ (이) .closest ( "데이터 (보기)").

   당신은 또한 jQueryUI를 사용하는 경우, 당신은의 (간단한) 버전을 얻을 : 그것으로 데이터 선택기를 그 데이터 항목의 존재를 확인, 당신은 $ 같은 ( "DIV : 데이터 (보기)") 할 수 있도록, 또는 $ (이) .closest ( "데이터 (보기)").

   http://api.jqueryui.com/data-selector/를 참조하십시오. 나는 얼마나 오래 그들이 그것을 했어에 대한 모르겠지만, 지금은 거기에!

9. ---

   9.여기에 인생을 단순화하는 플러그인입니다 https://github.com/rootical/jQueryDataSelector

   여기에 인생을 단순화하는 플러그인입니다 https://github.com/rootical/jQueryDataSelector

   그런 식으로 그것을 사용 :

   data selector           jQuery selector
     $$('name')              $('[data-name]')
     $$('name', 10)          $('[data-name=10]')
     $$('name', false)       $('[data-name=false]')
     $$('name', null)        $('[data-name]')
     $$('name', {})          Syntax error
   

from https://stackoverflow.com/questions/2891452/jquery-data-selector by cc-by-sa and MIT license