[JQUERY] 사용자 정의 데이터에의 jQuery 셀렉터는 HTML5를 사용하여 속성

사용자 정의 데이터에의 jQuery 셀렉터는 HTML5를 사용하여 속성

해결법

1. ---

   1.

   $("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"
   
   $("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"
   

   jQuery를 선택기에 봐 : 포함하는 것은 선택이다

   여기에 대한 정보는 다음과 같습니다 선택기를 포함

2. ---

   2.또한 사용될 수있는 데이터 () 선택 : jQuery를 UI가있다. 그것은 보인다 버전 1.7.0 이후 주변왔다.

   또한 사용될 수있는 데이터 () 선택 : jQuery를 UI가있다. 그것은 보인다 버전 1.7.0 이후 주변왔다.

   이처럼 사용할 수 있습니다 :

   데이터 - 기업의 속성을 가진 모든 요소를 ​​가져옵니다

   var companyElements = $("ul:data(group) li:data(company)");
   

   데이터 회사가 마이크로 소프트와 동일한 모든 요소를 ​​가져옵니다

   var microsoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") == "Microsoft";
                       });
   

   데이터 회사가 동일하지 않은 마이크로 소프트 않는 모든 요소를 ​​가져옵니다

   var notMicrosoft = $("ul:data(group) li:data(company)")
                          .filter(function () {
                              return $(this).data("company") != "Microsoft";
                          });
   

   기타...

   새의 한 가지주의 : 데이터 () 셀렉터가 선택하는 당신이 코드에 의해 데이터 값을 설정해야한다는 것입니다. 에 대한 작업을 위, HTML의 데이터를 정의하는 것만으로는 충분하지 않은 것을 이것은 의미합니다. 먼저이 작업을 수행해야합니다 :

   $("li").first().data("company", "Microsoft");
   

   이것은 당신이 $를 (...)를 사용하는 가능성이 단일 페이지 응용 프로그램 괜찮습니다.이 식물 또는 유사한 방법으로 데이터 ( "datakey", "값").

3. ---

   3.js 휘티 d 혀라도

   js 휘티 d 혀라도

   jQuery를 당신이 일을 찾고있는 쿼리를 만들기 위해 여러 선택기 (전체 목록)를 제공합니다. 귀하의 질문을 해결하기 위해 ...보다 적은,보다 큰 포함 등, "다른 경우에는은과 같은 다른 선택기를 사용하는 것이 가능하다" "." 당신은 또한 사용이 HTML5의 데이터 속성을보고와 함께 시작과 끝을 포함 할 수 있습니다. 모든 옵션을보기 위해 위의 전체 목록을 참조하십시오.

   기본 쿼리 위에 덮여있다, 요한 Hartsock의 답변을 사용하는 모든 데이터 기업의 요소의 취득 또는 Microsoft 제외한 모든 하나 (또는 ​​다른 버전 :되지 않음)를 얻을 중 하나에 최선의 방법이 될 것입니다.

   당신이 찾고있는 다른 지점이를 확장하기 위해, 우리는 몇 가지 메타 선택기를 사용할 수 있습니다. 여러 쿼리를 수행하려는 경우 첫째, 부모의 선택을 캐시 좋다.

   var group = $('ul[data-group="Companies"]');
   

   다음으로, 우리는 G로 시작하는이 세트 회사에서 찾아보실 수 있습니다

   var google = $('[data-company^="G"]',group);//google
   

   단어 소프트를 포함 아니면 회사

   var microsoft = $('[data-company*="soft"]',group);//microsoft
   

   이 요소의 데이터 속성의 끝 일치를 얻을 수도 있습니다

   var facebook = $('[data-company$="book"]',group);//facebook
   

   // 저장 선택 VAR 기 = $ ( 'UL [데이터 그룹 = "회사"] "); G와 // 데이터 회사 시작 VAR 구글 = $ ( "[데이터 회사 ^ ="G "] 그룹) .CSS ("컬러 ","녹색 "); // 데이터 회사는 부드러운 포함 VAR 마이크로 소프트 = $ ( "[데이터 회사 * ="소프트 "] 그룹) .CSS ( '색상', '청색'); 책 // 데이터 회사의 끝 VAR 페이스 북 = $ ( '[데이터 회사 $ = "책"] 그룹) .CSS ('색 ','핑크 '); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   • 마이크로 소프트
   • 구글
   • 페이스 북

   • ---

     4.순수 / 바닐라 JS 용액 (여기에서 예시 작업)

     순수 / 바닐라 JS 용액 (여기에서 예시 작업)

     // All elements with data-company="Microsoft" below "Companies"
     let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 
     
     // All elements with data-company!="Microsoft" below "Companies"
     let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 
     

     querySelectorAll에서 당신은 유효한 CSS 선택기 (현재 LEVEL3)을 사용해야합니다

     jQuery를 및 순수 JS에 대한 속도 테스트 (2018년 6월 29일) : 테스트가 크롬 67.0.3396.99 (64 비트), 사파리 11.0.3 (13604.5.6), 파이어 폭스 59.0.2에 맥 OS 높은 시에라 10.13.3 시행 하였다 (64 -비트). 가장 빠른 브라우저 화면을 보여줍니다 아래 결과 (사파리) :

     PureJS 크롬에 12 %, 파이어 폭스에 21 %와 사파리에 25 %에 대해 빠른 jQuery를 이상이었다. 흥미롭게도 크롬 속도는 초당 18.9M 작업, 파이어 폭스 26M, 사파리 160.9M했다 (!).

     우승자는 PureJS하고 빠른 브라우저는 사파리입니다 그래서 (빠른 크롬 제품보다 8 배!)

     다음은 시스템에서 테스트를 수행 할 수 있습니다 https://jsperf.com/js-selectors-x

   from https://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5 by cc-by-sa and MIT license