javascript / jQuery를 사용하여 data- * 속성 목록 가져 오기

data-*속성 이 0 개 이상인 임의의 HTML 요소가 주어지면 데이터의 키-값 쌍 목록을 검색하는 방법이 있습니다.

예를 들면 다음과 같습니다.

<div id='prod' data-id='10' data-cat='toy' data-cid='42'>blah</div>

프로그래밍 방식으로 이것을 검색하고 싶습니다.

{ "id":10, "cat":"toy", "cid":42 }

$.data()키를 미리 알고 있으면 jQuery (v1.4.3)를 사용하여 개별 데이터 비트에 액세스하는 것이 간단하지만 임의의 데이터 세트로 어떻게 수행 할 수 있는지는 확실하지 않습니다.

'단순한'jQuery 솔루션이 있으면 찾고 있지만 그렇지 않으면 더 낮은 수준의 접근 방식을 신경 쓰지 않습니다. 파싱을 시도 $('#prod').attributes했지만 Javascript-fu가 부족하여 실망 스럽습니다.

최신 정보

customdata 는 내가 필요한 것을 수행합니다. 그러나 기능의 일부에 대해서만 jQuery 플러그인을 포함시키는 것은 과도한 것으로 보입니다.

소스를 살펴보면 내 코드를 수정하는 데 도움이되었고 Javascript-fu가 향상되었습니다.

내가 생각해 낸 해결책은 다음과 같습니다.

function getDataAttributes(node) {
    var d = {}, 
        re_dataAttr = /^data\-(.+)$/;

    $.each(node.get(0).attributes, function(index, attr) {
        if (re_dataAttr.test(attr.nodeName)) {
            var key = attr.nodeName.match(re_dataAttr)[1];
            d[key] = attr.nodeValue;
        }
    });

    return d;
}

업데이트 2

허용 된 답변에서 알 수 있듯이 솔루션은 jQuery (> = 1.4.4)로 간단합니다. $('#prod').data()필요한 데이터를 반환합니다.

실제로 jQuery로 작업하는 경우 버전 기준 1.4.31.4.4 (아래 주석에 언급 된 버그로 인해) data-*속성은 다음을 통해 지원됩니다 .data().

jQuery 1.4.3부터 HTML 5 data- 속성은 자동으로 jQuery의 데이터 객체로 가져옵니다.

JavaScript 값은 연관된 값 (부울, 숫자, 객체, 배열 및 null 포함)으로 변환되는 동안 문자열은 그대로 유지됩니다. data- 속성은 더 이상 액세스하거나 (모든 데이터 값이 다음 jQuery를 내부에 저장되어있다) 돌연변이 다음 데이터 속성에 액세스 할 때 처음에 뽑아 있습니다.

이 jQuery.fn.data함수는 data-객체 내부의 모든 속성을 키-값 쌍으로 반환 하며, 키는 속성 이름의 일부이고 키 data-는 위에 명시된 규칙에 따라 변환 된 후 해당 속성의 값입니다.

나는 그것이 당신을 확신하지 못하면 간단한 데모를 만들었습니다 : http://jsfiddle.net/yijiang/WVfSg/

솔루션은 어렵지 않으므로 순수한 JavaScript 솔루션도 제공해야합니다.

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

이 속성이 오브젝트의 배열을 제공 name하고 value특성 :

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;
    }
});

그런 다음, 예를 들어, 값에 액세스 할 수 있습니다 data-my-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

편집 : babel 또는 TypeScript를 사용하거나 es6 브라우저 전용 코딩을 사용하는 경우 es6 화살표 기능을 사용하고 코드를 약간 단축하는 것이 좋습니다.

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

여기를보세요 :

브라우저가 HTML5 JavaScript API도 지원하는 경우 다음을 사용하여 데이터를 얻을 수 있어야합니다.

var attributes = element.dataset

또는

var cat = element.dataset.cat

아, 그러나 나는 또한 읽었다 :

불행하게도, 새로운 데이터 세트 속성은 아직 그래서 그 동안은 사용하는 것이 가장 좋습니다, 모든 브라우저에서 구현되지 않은 getAttribute및 setAttribute이전 있듯이.

2010 년 5 월부터입니다.

어쨌든 jQuery를 사용하는 경우를 살펴해야 할 수 있습니다 CUSTOMDATA의 플러그인을. 그래도 경험이 없습니다.

위에서 언급했듯이 최신 브라우저 에는 The HTMLElement.dataset API가 있습니다.
이 API는 DOMStringMap을 제공하며 data-*간단히 수행하는 속성 목록을 검색 할 수 있습니다 .

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

data-속성의 키 이름을 사용하여 배열을 검색 할 수도 있습니다

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];});

이것처럼 당신은 그것들을 반복하고 우리가 전에해야했던 것처럼 요소의 모든 속성 사이에서 필터링 할 필요없이 그것들을 사용할 수 있습니다 .

또는 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').info();

데이터 세트 속성을 통해 데이터를 가져와야합니다.

var data = element.dataset;

데이터 셋 은 데이터 속성을 얻는 데 유용한 도구입니다

다른 객체와 마찬가지로 데이터 속성을 반복하여 키와 값을 얻을 수 있습니다 $.each.

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

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

var model = $(".model");

var ul = $("<ul>").appendTo("body");

$(model).each(function(index, item) {
  ul.append($(document.createElement("li")).text($(this).text()));
  $.each($(this).data(), function(key, value) {
    ul.append($(document.createElement("strong")).text(key + ": " + value));
    ul.append($(document.createElement("br")));
  }); //inner each
  ul.append($(document.createElement("hr")));
}); // outer each

/*print html*/
var htmlString = $("ul").html();
$("code").text(htmlString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="demo"></h1>

<ul>
  <li class="model" data-price="45$" data-location="Italy" data-id="1234">Model 1</li>
  <li class="model" data-price="75$" data-location="Israel" data-id="4321">Model 2</li> 
  <li class="model" data-price="99$" data-location="France" data-id="1212">Model 3</li> 
</ul>

<pre>
<code class="language-html">
  
</code>
</pre>

<h2>Generate list by code</h2>
<br>

코드 펜 : https://codepen.io/ezra_siton/pen/GRgRwNw?editors=1111

모든 데이터 속성을 찾는 한 가지 방법은을 사용하는 것 element.attributes입니다. 을 사용 .attributes하면 문자열 "data-"가 포함 된 항목을 필터링하여 모든 요소 속성을 반복 할 수 있습니다.

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;

}