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


Answers

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

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 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));
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 पार्स करने की कोशिश करने के लिए जाना था $('#prod').attributes लेकिन जावास्क्रिप्ट-फू की मेरी कमी मुझे नीचे दे रही है।

अद्यतन करें

customdata जो मुझे चाहिए 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;
}

अद्यतन 2

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




जैसा कि ऊपर वर्णित caniuse.com/#feat=dataset में HTMLElement.dataset API है।
वह एपीआई आपको एक DOMStringMap देता है, और आप data-* की सूची पुनर्प्राप्त कर सकते data-* विशेषताएं केवल यह कर रही हैं:

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

आप data- साथ एक सरणी भी प्राप्त कर सकते 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];});

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




या एक jQuery विधि के लिए gilly3 के उत्कृष्ट जवाब को परिवर्तित करें:

$.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() ;




Links