জাভাস্ক্রিপ্ট / jQuery ব্যবহার করে ডেটা- * বৈশিষ্ট্যগুলির তালিকা পান

Question

শূন্য বা ততোধিক 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তবে জাভাস্ক্রিপ্ট-ফু এর অভাব আমাকে হতাশ করে দিচ্ছে।

হালনাগাদ

কাস্টমটাটা আমার যা প্রয়োজন তা করে। তবে, এর কার্যকারিতাটির একাংশের জন্য একটি জিকুয়েরি প্লাগইন সহ একটি ওভারকিলের মতো মনে হয়েছিল।

সোর্স আইবোলিং আমাকে নিজের কোড ঠিক করতে সহায়তা করেছে (এবং আমার জাভাস্ক্রিপ্ট-ফু উন্নত করেছে)।

সমাধানটি আমি এখানে নিয়ে এসেছি:

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()প্রয়োজনীয় ডেটা ডিক ফিরিয়ে দেবে।

Comments

"আপডেট 2" অ্যাড্রেসিংয়ের সাথে জেকারি ডেটা সম্পর্কে সচেতন থাকুন () কিছু অভ্যন্তরীণ ক্যাশে এবং ডেটা (কী, মান) ব্যবহার করে ডিওমে প্রচার করে না, যা প্রচুর মাথা ব্যথার কারণ হতে পারে। এছাড়াও jquery 3 ডেটা () বৈশিষ্ট্য ডেটা-কিছু-জিনিস = "পরীক্ষা" কে {কিছুতে পরিবর্তন করুন: "পরীক্ষা"}

— ETNyx

Answer 1

প্রকৃতপক্ষে, আপনি যদি সংস্করণ হিসাবে jQuery নিয়ে কাজ করছেন 1.4.31.4.4 (নীচের মন্তব্যে উল্লিখিত বাগের কারণে), data-*বৈশিষ্ট্যগুলি এর মাধ্যমে সমর্থিত .data():

JQuery 1.4.3 হিসাবে এইচটিএমএল 5 টি data- বৈশিষ্ট্য স্বয়ংক্রিয়ভাবে jQuery এর ডেটা অবজেক্টে টানা হবে।

নোট করুন যে জাভাস্ক্রিপ্টের মানগুলি তাদের সম্পর্কিত মানটিতে রূপান্তরিত হওয়ার সাথে সাথে স্ট্রিংগুলি অক্ষত রয়েছে (এটিতে বুলিয়ান, সংখ্যা, অবজেক্ট, অ্যারে এবং নাল অন্তর্ভুক্ত)। data- বৈশিষ্ট্যাবলী প্রথমবার তথ্য সম্পত্তি অ্যাক্সেস করা হয় টানা হয় এবং তারপর আর অ্যাকসেস বা ভাবে পরিবর্তিত (সমস্ত ডেটা মান তারপর jQuery মধ্যে অভ্যন্তরীণভাবে সংরক্ষণ করা হয় হয় না)।

jQuery.fn.dataফাংশনের সব ফিরে আসবে data-কী পরে অ্যাট্রিবিউট নামের অংশ হচ্ছে কী-মান জোড়া হিসাবে একটি অবজেক্টের অভ্যন্তরে গুণ, data-এবং মান যে বৈশিষ্ট্য মান পরে হচ্ছে উপরে বর্ণিত নিয়ম অনুসরণ রূপান্তরিত হচ্ছে।

এটি যদি আপনাকে বোঝায় না তবে আমি একটি সাধারণ ডেমোও তৈরি করেছি: http://jsfiddle.net/yijiang/WVfSg/

Comments

না, এটি 1.4.3 এ ভাঙ্গা । সর্বনিম্ন 1.4.4 স্পষ্টভাবে প্রয়োজন ly

— ক্রিসেন্ট ফ্রেশ

ধন্যবাদ। ঠিক এটাই আমি খুঁজছিলাম। আমি এর আগে 1.4.3 দিয়ে চেষ্টা করেছি এবং খুব বেশি দূরে যাইনি। jsfiddle ডেমো খুব সাহায্য করেছে।

— শন চিন

@Isc: এক জিনিস যে খুব বিরক্তিকর হয় "deserializing" মান এ jQuery এর মধ্যে প্রয়াস অ্যাট্রিবিউট পাওয়া (অর্থাত মাস্টার থেকে : !jQuery.isNaN( data ) ? parseFloat( data ) : ...)। আমার অ্যাট্রিবিউটে আমার কাছে প্রোডাক্ট সিরিয়াল নম্বর ছিল যেমন data-serial="00071134"jQuery একটি সংখ্যায় বিভক্ত হয়ে 71134আমাকে কম মার্জিতগুলিতে ফিরে যেতে বাধ্য করেছে .attr('data-serial')(আপনার ক্ষেত্রে কোনও বিকল্প নয়)। আমি এসও-তে এমন প্রশ্ন দেখেছি যেগুলি একই হতাশা প্রকাশ করেছে .data(), তাদের খুঁজে বের করার চেষ্টা করবে ...

— ক্রিসেন্ট ফ্রেশ

@ ক্রিসেন্টফ্রেশ: ভালো কথা অবশ্যই কিছু আমার জন্য নজর রাখা উচিত। আমার সমাধানে ( gist.github.com/701652 ) আমি নোড পার্সিংয়ে ফিরে যাই att এই বিষয়টি মাথায় রেখে, সম্ভবত আমার নিজেই গুণাবলীর বিশ্লেষণকে আঁকিয়ে রাখা উচিত।

— শান চিন

মনে রাখবেন যে $.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

সম্পাদনা: আপনি যদি বাবেল বা টাইপস্ক্রিপ্ট ব্যবহার করছেন বা কেবল এসআই 6 ব্রাউজারের জন্য কোডিং করছেন তবে এস 6 তীর ফাংশনগুলি ব্যবহার করার জন্য কোডটি কিছুটা ছোট করার জন্য এটি একটি দুর্দান্ত জায়গা:

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

Comments

ভাল উত্তর! প্রথম লাইনটি -jQuery এর মতো অক্ষরটিকে প্রতিস্থাপন করে না তবে সম্পাদিত উত্তরটি দেয়।

— টিমো হুভিনেন

@ gilly3 আপনার jsfiddle কাজ করছে বলে মনে হচ্ছে না। আপনি একটি চেহারা পেতে পারেন?

— ইথান

@ ইথান - স্থির। আমাকে জানতে দেওয়ার জন্য ধন্যবাদ। আমি জেএসওউনটিফায়ার.আর.এস. থেকে সুন্দরভাবে জেএসএন প্রিন্ট করার জন্য বিউটিফাই.জেএস ব্যবহার করছিলাম । স্পষ্টতই সেই লিঙ্কটি এখন ভেঙে গেছে। কিন্তু, যে Overkill ছিল যেহেতু JSON.stringify()তাদেরকে JSON সালে নির্মিত বিন্যাস করা হয়েছে।

— gilly3

@ গিলি 3 ফ্যান্টাস্টিক, আপনার রুটিনটি সমস্ত আনতে দুর্দান্ত। কোনও প্রদত্ত কীটির জন্য ডেটা আনার পাশাপাশি কী (গুলি) এর জন্য পরিবর্তিত ডেটা আপডেট করা কি সহজ হবে? আপনি যদি ভাগ করতে পারেন, দুর্দান্ত হবে।

— এথান

@Ethan - একটি একক মান পেয়ে, এটি চিন্তা কোরো না: el.getAttribute("data-foo")। আপনি কীভাবে কোনও অবজেক্টের উপর ভিত্তি করে ডেটা অ্যাট্রিবিউট সেট করতে পারবেন তা জানাতে আমি আমার উত্তর আপডেট করেছি।

— gille3

Answer 3

এখানে একবার দেখুন :

যদি ব্রাউজারটি এইচটিএমএল 5 জাভাস্ক্রিপ্ট এপিআই সমর্থন করে তবে আপনার সাথে ডেটা পেতে সক্ষম হওয়া উচিত:

var attributes = element.dataset

অথবা

var cat = element.dataset.cat

ওহ, তবে আমি আরও পড়েছি:

দুর্ভাগ্যক্রমে, নতুন ডেটাसेट সম্পত্তিটি এখনও কোনও ব্রাউজারে কার্যকর করা হয়নি, সুতরাং এর মধ্যে এটি ব্যবহার করা ভাল getAttributeএবং এর setAttributeআগে যেমন প্রদর্শিত হয়েছিল।

এটি ২০১০ সালের মে থেকে।

---

আপনি যদি যাইহোক jQuery ব্যবহার করেন তবে আপনার কাস্টমডাটা প্লাগইনটি একবার দেখুন। যদিও এর সাথে আমার কোনও অভিজ্ঞতা নেই।

Comments

আগ্রহের বিষয়টিও, পিপিকে

— পয়েন্টি

ধন্যবাদ ফেলিক্স। আমি কাস্টমটাটা পেরিয়ে এসেছি। দুর্ভাগ্যক্রমে, এটি আমার যা প্রয়োজন তা করে না - অর্থাত্ কীগুলি আগে থেকে জানা যায় নি এমন সমস্ত ডেটা পান।

— শন চিন

@ এলএসসি: ডকুমেন্টেশন বলেছে যে $("#my").customdata()আপনাকে দেওয়া উচিত {method: "delete", remote: "true"}... সুতরাং এটি কাজ করা উচিত।

— ফেলিক্স ক্লিং

একটি পৃথক jQuery প্লাগইন ব্যবহার করা ওভারকিলের মতো মনে হয়, তবে কাস্টমডাটার উত্সটি অনুসন্ধান করা আমার নিজের সমাধানগুলি ঠিক করতে সহায়তা করেছিল! আপনার উত্তর গ্রহণ করবে এবং কার্যকরী কার্যের সাথে কিউ আপডেট করবে।

— শন চিন

@ সিএলসি: সম্পূর্ণ জরিমানা, সমাধানের মধ্যে তৈরি সবসময়ই ইমোকে পছন্দ করা উচিত। দুর্ভাগ্যক্রমে আমি সর্বশেষ jQuery বিকাশের সাথে আপ টু ডেট নই;) কেবলই কেন কেউ আমাকে ভোট দিয়েছেন বলে ভেবে অবাক

— হচ্ছেন

Answer 4

পূর্বেই উল্লেখ করা হয়েছে আধুনিক ব্রাউজারে আছে দ্য HTMLElement.dataset API- টি।
সেই এপিআই আপনাকে একটি ডিওএমএস স্ট্রিংম্যাপ দেয় এবং আপনি খালি করা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

আইআইআরসি, 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;

}