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

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

때 HTML 요소는 HTML 요소입니다.data-*데이터에 대한 키-값 쌍 목록을 검색하려면 어떻게 해야 합니까?

예를 들어 다음과 같은 경우:

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

프로그래밍 방식으로 이 정보를 검색할 수 있습니다.

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

jQuery(v1.4.3) 사용, 다음을 사용하여 개별 데이터 비트 액세스$.data()키를 미리 알고 있으면 간단하지만 임의의 데이터 집합을 사용하여 이를 수행할 수 있는 방법은 명확하지 않습니다.

저는 '간단한' jQuery 솔루션이 있다면 그것을 찾고 있지만, 그 외에는 더 낮은 수준의 접근 방식을 개의치 않습니다.나는 해석하려고 시도했습니다.$('#prod').attributes하지만 Javascript-fu가 부족해서 실망하고 있습니다.

갱신하다

사용자 지정 데이터는 내가 필요로 하는 것을 수행합니다.그러나 jQuery 플러그인을 기능의 일부에만 포함하는 것은 지나친 것처럼 보였습니다.

소스에 눈독을 들인 것은 제가 제 코드를 고치는 데 도움이 되었습니다(그리고 자바스크립트-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()필요한 데이터 딕트를 반환합니다.

사실 1.4.3 1.4.4 버전에서 jQuery로 작업하고 있다면 (아래 댓글에 언급된 버그 때문에)data-*특성은 다음을 통해 지원됩니다.

1 5 jQuery 1.4.3 준 HTML 5data-속성은 jQuery의 데이터 개체에 자동으로 삽입됩니다.

자바스크립트 값이 관련 값(불리언, 숫자, 객체, 배열 및 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;
    }
});

다음 를 들어, " 다음예다들같음은값있수다니습액할스세에그과런어를,▁of▁value다▁the▁you니있습수"의 값에 액세스할 수 .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

편집: 바벨 또는 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를 사용하는 경우 사용자 지정 데이터 플러그인을 확인해야 할 수 있습니다.하지만 저는 그것에 대한 경험이 없습니다.

위에서 언급한 바와 같이 최신 브라우저에는 HTMLlement.dataset API가 있습니다.
해당 API는 DOMStringMap을 제공하며 다음 목록을 검색할 수 있습니다.data-*속성은 다음과 같습니다.

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

또다한음사배검수있색습다니할열을여용하을▁▁array로 배열을 할 수도 .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];});

이렇게 하면 이전에 수행해야 했던 것처럼 요소의 모든 속성 간에 필터링할 필요 없이 이러한 속성을 반복하여 사용할 수 있습니다.

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

var data = element.dataset;

데이터셋은 데이터 수집에 유용한 도구입니다.

변환 또는변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();

값을 위해 수. 키와 값을 입니다.$.each:

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

나는 중첩된 각각을 사용합니다. 이것은 나에게 가장 쉬운 해결책입니다. (내 예에서 출력 데이터 속성을 사용하여 "값으로 수행하는 작업"을 제어/변경하기가 쉽습니다.)ul-listJquery 코드)

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

모든 데이터 속성을 찾는 한 가지 방법은 를 사용하는 것입니다..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;

}

키 이름을 알고 있는 경우 개체 파괴를 사용하여 다음과 같은 값을 얻을 수도 있습니다.

const {id, cat, cid } = document.getElementById('prod').dataset;

필요하지 않은 키를 건너뛰고 필요한 키를 얻을 수도 있습니다.

const { cid, id } = document.getElementById('prod').dataset;

100% Javascript no jQuery ;)

DOM 문자열 맵:

  console.log(document.getElementById('target-element-id').dataset);

또는 사용자 정의 변수:

  var data = {};

  Object.entries(document.getElementById('target-element-id').dataset).forEach(([key, val]) => {
    data[key] = val;
  });

  console.log(data);

언급URL : https://stackoverflow.com/questions/4187032/get-list-of-data-attributes-using-javascript-jquery