डेटा की सूची प्राप्त करें- * जावास्क्रिप्ट / jQuery का उपयोग करके विशेषताएँ

Question

शून्य या अधिक data-*विशेषताओं के साथ एक मनमाने ढंग से HTML तत्व को देखते हुए , डेटा के लिए कुंजी-मूल्य जोड़े की एक सूची कैसे प्राप्त की जा सकती है।

जैसे यह दिया गया:

<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लेकिन मेरे जावास्क्रिप्ट-फू की कमी मुझे निराश कर रही है।

अपडेट करें

customdata मैं क्या जरूरत है। हालाँकि, एक jQuery प्लगइन सहित इसकी कार्यक्षमता के एक अंश के लिए एक ओवरकिल की तरह लग रहा था।

स्रोत पर नजर रखने से मुझे अपने स्वयं के कोड को ठीक करने में मदद मिली (और मेरे जावास्क्रिप्ट-फू में सुधार हुआ)।

यहाँ मैं के साथ आया समाधान है:

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

अद्यतन २

जैसा कि स्वीकृत उत्तर में दिखाया गया है, समाधान jQuery (> = 1.4.4) के साथ तुच्छ है। $('#prod').data()आवश्यक डेटा को वापस लौटाएगा।

Comments

Addresing "अपडेट 2" को jquery डेटा के बारे में पता होना चाहिए () कुछ आंतरिक कैश का उपयोग करें और डेटा (कुंजी, मूल्य) DOM को प्रचारित नहीं करता है, जिससे बहुत सारे सिरदर्द हो सकते हैं। इसके अलावा jquery 3 डेटा () विशेषता डेटा-कुछ-चीज़ = "परीक्षण" को {someThing: "परीक्षण"} में

— परिवर्तित करें

Answer 1

दरअसल, यदि आप संस्करण के रूप में jQuery के साथ काम कर रहे हैं 1.4.31.4.4 (नीचे टिप्पणी में उल्लिखित बग के कारण), data-*विशेषताओं के माध्यम से समर्थित हैं .data():

JQuery के 1.4.3 HTML 5 data- विशेषताओं के साथ jQuery के डेटा ऑब्जेक्ट में स्वचालित रूप से खींच लिया जाएगा।

ध्यान दें कि स्ट्रिंग को बरकरार रखा गया है, जबकि जावास्क्रिप्ट मान उनके संबद्ध मूल्य में परिवर्तित होते हैं (इसमें बूलियन, संख्या, ऑब्जेक्ट, सरणियाँ और नल शामिल हैं)। data- गुण पहली बार डेटा संपत्ति एक्सेस किया जाता है में खींच रहे हैं और उसके बाद अब तक पहुँचा या उत्परिवर्तित (सभी डेटा मानों तो jQuery में आंतरिक रूप से जमा हो जाती है) कर रहे हैं।

jQuery.fn.dataसमारोह के सभी वापस आ जाएगी data-कुंजी के बाद विशेषता नाम का हिस्सा होने के साथ कुंजी-मान जोड़ों के रूप में एक वस्तु के अंदर विशेषता, data-और मूल्य है कि विशेषता के मान के बाद किया जा रहा है कि ऊपर कहा गया नियमों का पालन परिवर्तित किया जा रहा है।

मैंने एक सरल डेमो भी बनाया है यदि वह आपको मना नहीं करता है: http://jsfiddle.net/yijiang/WVfSg/

Comments

नहीं, यह 1.4.3 में टूट गया है । न्यूनतम 1.4.4 की आवश्यकता है।

— वर्धमान ताजा

धन्यवाद। ठीक वैसा ही मैं देख रहा था। मैंने पहले 1.4.3 के साथ कोशिश की थी और बहुत दूर नहीं गया था। jsfiddle डेमो ने भी मदद की।

— शॉन चिन

@ आईएससी: एक चीज जो बहुत कष्टप्रद है, वह है विशेषता में पाया गया मूल्य (यानी मास्टर से!jQuery.isNaN( data ) ? parseFloat( data ) : ... ) : "डिसेरराइजिंग" पर jQuery का प्रयास । मेरे पास मेरी विशेषता में उत्पाद सीरियल नंबर थे जैसे कि data-serial="00071134"jQuery ने एक संख्या में मंगाया 71134, मुझे कम सुरुचिपूर्ण .attr('data-serial')(आपके मामले में एक विकल्प नहीं) में वापस जाने के लिए मजबूर किया । मैंने SO पर ऐसे प्रश्न देखे हैं, जो इसी तरह की कुंठाओं की आवाज़ .data()निकालते हैं, एक को खोदने की कोशिश करेंगे ...

— वर्धमान ताज़ा

@CrescentFresh: अच्छी बात है। निश्चित रूप से मुझे कुछ देखना चाहिए। मेरे समाधान में ( gist.github.com/701652 ) मैं jQuery <1.4.3 जब पार्सिंग नोड पर वापस आती हूं; इस मुद्दे को ध्यान में रखते हुए, शायद मुझे विशेषताओं को मैन्युअल रूप से पार्स करने के साथ चिपकना चाहिए।

— शॉन चिन

ध्यान रखें कि $.data()आपके द्वारा संग्रहित कुछ भी वापस लौटाता है $.data(key, value)। यदि आप वास्तव में जाँचना चाहते हैं कि क्या कुछ वास्तव में मार्कअप में डेटा के रूप में संग्रहीत है- * विशेषता, तो यह विधि सबसे अच्छा विकल्प नहीं हो सकती है।

— फिलिप वाल्टन

Answer 2

शुद्ध जावास्क्रिप्ट समाधान के रूप में अच्छी तरह से पेश किया जाना चाहिए, क्योंकि समाधान मुश्किल नहीं है:

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

संपादित करें: यदि आप एगेल या टाइपस्क्रिप्ट का उपयोग कर रहे हैं, या केवल es6 ब्राउज़रों के लिए कोडिंग कर रहे हैं, तो यह es6 एरो फ़ंक्शंस का उपयोग करने के लिए एक अच्छी जगह है, और कोड को थोड़ा छोटा करें:

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

Comments

अच्छा उत्तर! पहली पंक्ति -jQuery की तरह चरित्र को प्रतिस्थापित नहीं करती है लेकिन संपादित उत्तर करता है।

— टिमो हुओवेनन

@ gilly3 आपका jsfiddle काम नहीं करता है। क्या आप देख सकते हैं?

— एथन

@ ईथन - फिक्स्ड। मुझे बताने के लिए धन्यवाद। मैं jsbeautifier.org से सुंदर रूप से JSON प्रिंट करने के लिए beautify.js का उपयोग कर रहा था । जाहिर है कि अब लिंक टूट गया है। लेकिन, जब JSON.stringify()से JSON फॉर्मेटिंग का निर्माण हुआ है तब से ओवरकिल था ।

— gilly3

@ gilly3 बढ़िया, आपकी दिनचर्या सभी को लाने के लिए बढ़िया है। क्या किसी दिए गए कुंजी के साथ-साथ कुंजी (एस) के लिए संशोधित डेटा को अपडेट करना आसान होगा? यदि आप साझा कर सकते हैं, तो यह बहुत अच्छा होगा।

— एथन

@ ईथन - एकल मूल्य प्राप्त करने के लिए, इसे उखाड़ फेंकें नहीं el.getAttribute("data-foo"):। मैंने अपना उत्तर यह दिखाने के लिए अपडेट किया है कि आप किसी ऑब्जेक्ट के आधार पर डेटा विशेषताएँ कैसे सेट कर सकते हैं।

— gilly3

Answer 3

एक नज़र यहाँ है :

यदि ब्राउज़र HTML5 जावास्क्रिप्ट एपीआई का भी समर्थन करता है, तो आपको इसके साथ डेटा प्राप्त करने में सक्षम होना चाहिए:

var attributes = element.dataset

या

var cat = element.dataset.cat

ओह, लेकिन मैंने भी पढ़ा:

दुर्भाग्य से, नई डेटासेट संपत्ति अभी तक किसी भी ब्राउज़र में लागू नहीं की गई है, इसलिए इस बीच इसका उपयोग करना सबसे अच्छा है getAttributeऔर setAttributeजैसा कि पहले दिखाया गया है।

यह मई 2010 से है।

---

यदि आप वैसे भी jQuery का उपयोग करते हैं, तो आप कस्टमडेटा प्लगइन पर एक नज़र रखना चाहते हैं । हालांकि मुझे इसके साथ कोई अनुभव नहीं है।

Comments

रुचि के अलावा, पीपीपी से: quirksmode.org/dom/w3c_core.html#attributes

— Pointy

धन्यवाद फेलिक्स। मैं रूढ़िवादिता में आ गया था। दुर्भाग्य से, यह वह नहीं करता है जो मुझे चाहिए - अर्थात सभी डेटा दिए जाएं जो कि चाबियाँ पहले से ज्ञात नहीं हैं।

— शॉन चिन

@lsc: प्रलेखन कहता है कि $("#my").customdata()आपको देना चाहिए {method: "delete", remote: "true"}... इसलिए यह काम करना चाहिए।

— फेलिक्स क्लिंग

एक अलग jQuery प्लगइन का उपयोग एक overkill की तरह लगता है, लेकिन customdata के लिए स्रोत को देखने से मेरे अपने समाधान को ठीक करने में मदद मिली! आपके उत्तर को स्वीकार करेगा और कार्य फ़ंक्शन के साथ क्यू को अपडेट करेगा।

— शॉन चिन

@lsc: पूरी तरह से ठीक है, समाधान में निर्माण हमेशा पसंदीदा imo होना चाहिए। दुर्भाग्य से मैं नवीनतम jQuery के विकास के साथ अप-टू-डेट नहीं हूं;) बस सोच रहा था कि किसी ने मुझे वोट क्यों दिया ...

— फेलिक्स क्लिंग

Answer 4

जैसा कि ऊपर उल्लेख आधुनिक ब्राउज़रों में 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];});

और इस तरह आप उन तत्वों को पुनरावृत्त कर सकते हैं और उन्हें उपयोग करने की आवश्यकता के बिना तत्व की सभी विशेषताओं के बीच फ़िल्टरिंग की आवश्यकता होती है जैसे कि हम पहले करते थे ।

Answer 5

या 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():;

Answer 6

आपको डेटा को डेटासेट विशेषताओं के माध्यम से प्राप्त करना चाहिए

var data = element.dataset;

डेटा-विशेषता प्राप्त करने के लिए डेटासेट उपयोगी उपकरण है

Comments

IIRC, this.datasetअभी तक सभी ब्राउज़रों पर काम नहीं करता है। हालांकि एक jquery प्लगइन है जो यह सुविधा प्रदान करता है।

— शॉन चिन

Answer 7

आप डेटा विशेषताओं के बारे में सिर्फ यह बता सकते हैं कि किसी अन्य वस्तु की तरह चाबियाँ और मान प्राप्त करने के लिए, यहाँ यह कैसे करना है $.each:

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

Answer 8

मैं प्रत्येक के लिए नेस्टेड का उपयोग करता हूं - यह मेरे लिए सबसे आसान समाधान है (आसान को नियंत्रित करना / बदलना "जो आप मूल्यों के साथ करते हैं - मेरे उदाहरण में आउटपुट डेटा-विशेषताओं के रूप में ul-list) (जेकरी कोड)

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

Answer 9

सभी डेटा विशेषताओं को खोजने का एक तरीका उपयोग कर रहा है 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;

}