[JQUERY] 자바 스크립트 / jQuery를 사용하여 속성 데이터 - *의 목록을 가져옵니다

자바 스크립트 / jQuery를 사용하여 속성 데이터 - *의 목록을 가져옵니다

해결법

1. ---

   1.이 버전으로, jQuery를 함께 작업하는 경우 사실, 1.4.3은 1.4.4 (때문에 아래의 코멘트에 언급 된 버그의), 데이터 - * 속성) (.DATA를 통해 지원됩니다 :

   이 버전으로, jQuery를 함께 작업하는 경우 사실, 1.4.3은 1.4.4 (때문에 아래의 코멘트에 언급 된 버그의), 데이터 - * 속성) (.DATA를 통해 지원됩니다 :

   jQuery.fn.data 함수는 변환 된 다음 후의 키 데이터 - 후 속성 이름의 일부인 그 값이 그 속성 값 인 상태, 키 - 값 쌍으로 물체 내부의 데이터 - 속성을 모두 리턴 규칙은 위에서 언급 한.

   그것이 당신을 설득하지 않는 경우 나 또한 간단한 데모를 만들었습니다 http://jsfiddle.net/yijiang/WVfSg/

2. ---

   2.순수 자바 스크립트 솔루션은 솔루션은 어려운 일이 아니다으로,뿐만 아니라 제공되어야한다 :

   순수 자바 스크립트 솔루션은 솔루션은 어려운 일이 아니다으로,뿐만 아니라 제공되어야한다 :

   var a = [].filter.call(el.attributes, function(at) { return /^data-/.test(at.name); });
   

   이 이름 및 값 특성을 갖는 속성 오브젝트의 배열을 제공한다 :

   if (a.length) {
       var firstAttributeName = a[0].name;
       var firstAttributeValue = a[0].value;
   }
   

   편집 : 당신이 속성을 반복하고 데이터 객체를 채워 사전을 얻을 수있는, 한 단계 더 걸릴하려면 :

   var data = {};
   [].forEach.call(el.attributes, function(attr) {
       if (/^data-/.test(attr.name)) {
           var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
               return $1.toUpperCase();
           });
           data[camelCaseName] = attr.value;
       }
   });
   

   그런 다음, 데이터 내 가치 = "2"data.myValue 예를 들어, 값에 액세스 할 수 있습니다;

   jsfiddle.net/3KFYf/33

   편집 : 당신이 설정 데이터에 원했다, 당신은 할 수 객체에서 프로그램 적 요소에 속성을 경우 :

   Object.keys(data).forEach(function(key) {
       var attrName = "data-" + key.replace(/[A-Z]/g, function($0) {
           return "-" + $0.toLowerCase();
       });
       el.setAttribute(attrName, data[key]);
   });
   

   jsfiddle.net/3KFYf/34

   편집 : 당신이 바벨 또는 타이프 라이터를 사용하거나 ES6 브라우저에서만 코딩하는 경우,이 기능을 화살표 코드를 조금 단축 ES6 사용할 수있는 좋은 장소입니다 :

   var a = [].filter.call(el.attributes, at => /^data-/.test(at.name));
   

3. ---

   3.여기 보라 :

   여기 보라 :

   브라우저는 또한 HTML5 자바 스크립트 API를 지원하는 경우에 데이터를 얻을 수 있어야합니다 :

   var attributes = element.dataset
   

   또는

   var cat = element.dataset.cat
   

   아,하지만 나는 또한 읽기 :

   그것은 2010 년 5 월부터입니다.

   어쨌든 jQuery를 사용하는 경우 CUSTOMDATA 플러그인 좀보고 할 수 있습니다. 내가 실제로 경험 한 것이 아니다.

4. ---

   4.최신 브라우저 위에서 언급 한 바와 같이하여 더 HTMLElement.dataset API를 가지고있다. 즉, API는 당신에게 DOMStringMap를 제공하고, 당신은 간단하고 데이터 - * 속성 목록을 검색 할 수 있습니다 :

   최신 브라우저 위에서 언급 한 바와 같이하여 더 HTMLElement.dataset API를 가지고있다. 즉, API는 당신에게 DOMStringMap를 제공하고, 당신은 간단하고 데이터 - * 속성 목록을 검색 할 수 있습니다 :

   var dataset = el.dataset; // as you asked in the question
   

   당신은 또한 같은 데이터 - 프로퍼티의 키 이름과 배열을 검색 할 수 있습니다

   var data = Object.keys(el.dataset);
   

   또는하여 값을 매핑

   Object.keys(el.dataset).map(function(key){ return el.dataset[key];});
   // or the ES6 way: Object.keys(el.dataset).map(key=>{ return el.dataset[key];});
   

   이 같은 당신은 그를 반복 할 수 있고 우리가 전에 할 필요가 같은 요소의 모든 속성 사이에 필터링이 필요없이 사용합니다.

5. ---

   5.또는 변환 gilly3는 jQuery를 방법에 대한 우수한 대답입니다 :

   또는 변환 gilly3는 jQuery를 방법에 대한 우수한 대답입니다 :

   $.fn.info = function () {
       var data = {};
       [].forEach.call(this.get(0).attributes, function (attr) {
           if (/^data-/.test(attr.name)) {
               var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                   return $1.toUpperCase();
               });
               data[camelCaseName] = attr.value;
           }
       });
       return data;
   }
   

   사용 : $ ( 'foo는.') 정보를 ().

6. ---

   6.당신은 데이터 세트의 속성을 통해 데이터를 얻을 수 있어야

   당신은 데이터 세트의 속성을 통해 데이터를 얻을 수 있어야

   var data = element.dataset;
   

   데이터 세트는 데이터 가져 오기 - 속성에 대한 유용한 도구입니다

7. ---

   7.데이터가 키와 값을 얻을 수있는 다른 객체와 같은 속성을 통해 당신은 반복 처리, 여기에 $ .each 함께 할 방법은 있습니다 :

   데이터가 키와 값을 얻을 수있는 다른 객체와 같은 속성을 통해 당신은 반복 처리, 여기에 $ .each 함께 할 방법은 있습니다 :

       $.each($('#myEl').data(), function(key, value) {
           console.log(key);
           console.log(value);
       });
   

8. ---

   8.나는 각각의 중첩 사용하십시오 - 날 위해 가장 쉬운 해결책이다 (당신이 값으로 무엇을 제어 / 변화에 쉽게 "- 내 예를 들어 출력에서 ​​UL-목록으로 데이터가-속성) (JQuery와 코드)

   나는 각각의 중첩 사용하십시오 - 날 위해 가장 쉬운 해결책이다 (당신이 값으로 무엇을 제어 / 변화에 쉽게 "- 내 예를 들어 출력에서 ​​UL-목록으로 데이터가-속성) (JQuery와 코드)

   VAR 모델 = $ ( "모델입니다."); VAR UL = $ ( "

   ") appendTo ( '신체').; $ (모델) .each (기능 (인덱스 항목) { ul.append (. $ (document.createElement ( "리")) 텍스트 ($ (이)는 .text ())); $ .each ($ (이) .DATA () 함수 (키 값) { ul.append ($ (document.createElement ( "강력한")) 텍스트 (키 + ":". + 값)); ul.append ($ (document.createElement ( "BR"))); }); // 각 내주 ul.append ($ (document.createElement ( "시간"))); }); // 외부 각 / * 인쇄 HTML * / VAR htmlString = $ ( "UL") HTML을 ().; . $ ( "코드") 텍스트 (htmlString); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"> <링크 HREF = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css"REL = "스타일"/> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
   <리 클래스 = "모델"데이터 가격 = "$ 45"데이터 위치 = "이탈리아"데이터 ID = "1234"> 모델 1
   • 모델 2
   • 모델 3 <사전> <코드 클래스 = "언어 HTML">

     코드리스트 생성 로
     

     Codepen : https://codepen.io/ezra_siton/pen/GRgRwNw?editors=1111

   • ---

     9.모든 데이터 속성을 찾는 한 가지 방법은 element.attributes을 사용하고 있습니다. .attributes를 사용 할 수 있습니다 문자열 "데이터 -"를 포함 항목을 필터링 요소의 모든 속성을 통해 루프.

     모든 데이터 속성을 찾는 한 가지 방법은 element.attributes을 사용하고 있습니다. .attributes를 사용 할 수 있습니다 문자열 "데이터 -"를 포함 항목을 필터링 요소의 모든 속성을 통해 루프.

     let element = document.getElementById("element");
     
     function getDataAttributes(element){
         let elementAttributes = {},
             i = 0;
     
         while(i < element.attributes.length){
             if(element.attributes[i].name.includes("data-")){
                 elementAttributes[element.attributes[i].name] = element.attributes[i].value
             }
             i++;
         }
     
         return elementAttributes;
     
     }
     

   from https://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery by cc-by-sa and MIT license