ডেটা অ্যাট্রিবিউট দ্বারা উপাদান নির্বাচন করা

Question

তাদের dataবৈশিষ্ট্যের উপর ভিত্তি করে উপাদানগুলি নির্বাচন করার জন্য কি কোনও সহজ এবং সোজা-ফরোয়ার্ড পদ্ধতি আছে ? উদাহরণস্বরূপ, সমস্ত অ্যাঙ্কর নির্বাচন করুন customerIDযার নামযুক্ত ডেটা অ্যাট্রিবিউট রয়েছে যার মান রয়েছে 22।

এ relজাতীয় তথ্য সঞ্চয় করতে আমি একরকম দ্বিধাগ্রস্থ বা অন্য বৈশিষ্ট্যগুলি বোধ করি তবে এতে কোন ডেটা সংরক্ষণ করা হয়েছে তার উপর ভিত্তি করে কোনও উপাদান নির্বাচন করা আমার পক্ষে আরও কঠিন।

Comments

আরও দেখুন stackoverflow.com/q/4191386/292060

— goodeye

এটাই আমাকে সমস্ত ডেটা অ্যাট্রিবিউট (মান নির্বিশেষে) বেছে নিতে সহায়তা করেছে : $('*[data-customerID]')আপনি উদাহরণ সহ এটি ব্যবহার করতে পারেন$('*[data-customerID]').each( function() { ... });

— কাই নোক

Answer 1

$('*[data-customerID="22"]');

আপনি বাদ দিতে সক্ষম হবেন *তবে আপনি যদি কোন jQuery সংস্করণ ব্যবহার করছেন তার উপর নির্ভর করে যদি আমি সঠিকভাবে স্মরণ করি তবে এটি ত্রুটিযুক্ত ফলাফল দিতে পারে।

দ্রষ্টব্য যে সিলেক্টর এপিআই ( document.querySelector{,all}) এর সাথে সামঞ্জস্যের জন্য , গুণমান ( 22) এর আশেপাশের উদ্ধৃতিগুলি এই ক্ষেত্রে বাদ যাবে না ।

এছাড়াও, আপনি যদি আপনার jQuery স্ক্রিপ্টগুলিতে ডেটা অ্যাট্রিবিউটর সাথে অনেক বেশি কাজ করেন তবে আপনি HTML5 কাস্টম ডেটা অ্যাট্রিবিউট প্লাগইনটি ব্যবহার করে বিবেচনা করতে পারেন । এটি আপনাকে আরও বেশি পঠনযোগ্য কোডটি ব্যবহার করে লিখতে সহায়তা করে .dataAttr('foo')এবং ফলন ক্ষুদ্রকরণের পরে একটি ছোট ফাইল আকারে (ব্যবহারের সাথে তুলনা করে .attr('data-foo'))।

Comments

কেবল একটি নোট যে .ডাটা ('foo') jQuery 1.4.3 থেকে একটি 'ডেটা-ফু' বৈশিষ্ট্যের মান পেতে কাজ করে। এছাড়াও, যেহেতু jQuery 1.6: .data ('fooBar') 'ডেটা-ফু-বার' বৈশিষ্ট্যটি পায়।

— জেমস ম্যাককর্ম্যাক

@ জুটিয়াস: হ্যাঁ, প্লাগইন রিডমে এটি সম্পর্কে একটি নোট রয়েছে: "jQuery 1.4.3 হিসাবে, ডিফল্টরূপে .data()কাস্টম data-*বৈশিষ্ট্যগুলিতে মানচিত্র , এই প্লাগইনটিকে রিন্ডন্ড করে। এটি এখনও jQuery এর পুরানো সংস্করণগুলির জন্য ব্যবহার করা যেতে পারে ”"

— ম্যাথিয়াস বাইনেস

সুতরাং কিভাবে একটি পোস্ট jQuery 1.4.3, তার তথ্য অবজেক্টের মান দ্বারা একটি বস্তু নির্বাচন? দ্বিতীয়টি এই উদাহরণটিতে নির্বাচন করতে চান, গ্রাহক আইডি 22 এর সমান ডেটাযুক্ত কোনও বস্তু?

— ট্রিপ

এছাড়াও যদি আপনি কেবল নির্দিষ্ট ডেটা অ্যাট্রিবিউট উপস্থিতিতে আগ্রহী হন তবে আপনি এটি করতে পারেন:$('[data-customerID]')

— ডার্কসাইড

এটি কাজ করে না, যদি ডেটা ফিল্ডটি jquery (ব্যবহার করে .data()) সেট করা থাকে , তাই না?

— মার্টিন আর।

Answer 2

লোকেদের জন্য গুগলিং এবং ডেটা-অ্যাট্রিবিউটগুলির সাথে নির্বাচন সম্পর্কে আরও সাধারণ নিয়ম চান:

$("[data-test]")নিখুঁতভাবে ডেটা অ্যাট্রিবিউট রয়েছে এমন কোনও উপাদান নির্বাচন করবে (বৈশিষ্ট্যের মান বিবেচনা না করে)। সহ:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

---

$('[data-test~="foo"]')ডেটা অ্যাট্রিবিউট ধারণ foo করে এমন কোনও উপাদান নির্বাচন করবে তবে সঠিক হতে হবে না যেমন:

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

---

$('[data-test="the_exact_value"]')ডেটা অ্যাট্রিবিউটের সঠিক মান যেখানে এমন কোনও উপাদান নির্বাচন করবে the_exact_value, উদাহরণস্বরূপ:

<div data-test="the_exact_value">Exact Matches</div>

কিন্তু না

<div data-test="the_exact_value foo">This won't match</div>

Comments

ভাল. নোট করুন যে ~=শ্বেতস্পেসে পৃথক শব্দের সাথে *=মেলে যেখানে কোনও স্ট্রিংয়ের সাথে মেলে।

— সাম

^চরিত্র সম্পর্কে কি ?

— কুবা 44

@ কুবা 44 আসলে আপনিও ব্যবহার করতে পারেন as যেমন $('[data-test^=foo]')আপনি foo দিয়ে শুরু করে এমন কিছু নির্বাচন করেন, যেমন <div data-test="foo_exact_value">বা <div data-test="food">না<div data-test="seafoo">

— JDuarteDJ

বিশিষ্ট

— ৩৩/২০

Answer 3

ব্যবহার $('[data-whatever="myvalue"]')এইচটিএমএল সাথে কাউকে নির্বাচন করব বৈশিষ্ট্যাবলী কিন্তু নতুনতম তথ্য jQueries এটা যে যদি আপনি ব্যবহার বলে মনে হয় $(...).data(...)তথ্য সংযুক্ত করতে, এটি কিছু জাদু ব্রাউজার অজানা ব্যবহার এবং HTML প্রভাবিত করে না, অতএব আবিষ্কৃত হয় না .findযেমন নির্দেশিত পূর্ববর্তী উত্তর ।

(1.7.2+ সাথে পরীক্ষিত) যাচাই (এছাড়াও দেখুন বেহালার ): (আরও সম্পূর্ণ হবে সংশোধিত)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

Comments

আহা - আউট অন্য কারো পয়েন্ট পালাক্রমে এই আউট stackoverflow.com/questions/4191386/...

— drzaus

এবং এর সাথে .filter এখানে

— ড্রজাস

এটি কিছু ম্যাজিক ব্রাউজার জিনিস ব্যবহার করে এবং এইচটিএমএলকে প্রভাবিত করে না : যাদু বলে কোনও জিনিস নেই;) learningjquery.com/2011/09/used-jquerys-data-apis

— টম সারদুই

@ টমসরডুয়: "পর্যাপ্ত উন্নত প্রযুক্তি যাদু থেকে আলাদা নয়" "

— ড্রজাউস

আপনি যদি কোনও ডেটা অ্যাট্রিবিউট যুক্ত করে থাকেন যা আপনাকে পরে খুঁজে বার করতে হবে, ব্যবহার করুন$item.attr('data-id', 10);

— পেড্রো ম্যারিরা

Answer 4

আমি jQuery ছাড়া কোনও জাভাস্ক্রিপ্ট উত্তর দেখিনি। আশা করি এটি কাউকে সাহায্য করবে।

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

তথ্য:

• তথ্য বৈশিষ্ট্য

• .querySelectorAll ();

Comments

এর জন্য ধন্যবাদ. অ-jquery সমাধান দেখে ভাল লাগছে।

— চক

Answer 5

ডেটা অ্যাট্রিবিউট সহ সমস্ত অ্যাঙ্কর নির্বাচন করতে data-customerID==22, আপনার aঅনুসন্ধানের সুযোগটি কেবলমাত্র উপাদান উপাদানটিতে সীমাবদ্ধ করতে হবে। পৃষ্ঠায় অনেকগুলি উপাদান থাকা অবস্থায় একটি বৃহত লুপে বা উচ্চ ফ্রিকোয়েন্সিতে ডেটা অ্যাট্রিবিউট অনুসন্ধানগুলি করা পারফরম্যান্স সমস্যার কারণ হতে পারে।

$('a[data-customerID="22"]');

Answer 6

নেটিভ জেএস উদাহরণ

উপাদানগুলির নোডলিস্ট পান

var elem = document.querySelectorAll('[data-id="container"]')

এইচটিএমএল: <div data-id="container"></div>

প্রথম উপাদান পান

var firstElem = document.querySelector('[id="container"]')

এইচটিএমএল: <div id="container"></div>

নোডের একটি সংগ্রহকে লক্ষ্য করুন যা কোনও নোডলিস্টকে ফেরত দেয়

document.getElementById('footer').querySelectorAll('[data-id]')

এইচটিএমএল:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

একাধিক (ওআর) ডেটা মানের উপর ভিত্তি করে উপাদানগুলি পান

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

এইচটিএমএল:

<div data-selection="20"></div>
<div data-section="12"></div>

সম্মিলিত (ও) ডেটা মানগুলির ভিত্তিতে উপাদানগুলি পান

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

এইচটিএমএল:

<div data-prop1="12" data-prop2="20"></div>

মানটি যেখানে শুরু হয় সেখানে আইটেমগুলি পান

document.querySelectorAll('[href^="https://"]')

Comments

"প্রথম উপাদানটি পান" এর জন্য নির্বাচকটি সঠিক তবে অন্যান্য উদাহরণের সাথে সামঞ্জস্যপূর্ণ নয় - আমি বিশ্বাস করি এটি "ডেটা-" অনুপস্থিত।

— গাইপ্যাডক

Answer 7

জ্যাকুরি ফিল্টার () পদ্ধতির মাধ্যমে:

http://jsfiddle.net/9n4e1agn/1/

এইচটিএমএল:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

javascript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

Comments

তুমি কি বেহালার চেষ্টা করেছ? ফিল্টার পদ্ধতি একই জিনিস অর্জনের জন্য কেবলমাত্র অন্য পদ্ধতি। এটি কার্যকর হতে পারে যখন আপনার কাছে ইতিমধ্যে জ্যাকুয়ারি অবজেক্টের একটি সেট রয়েছে এবং আপনাকে ডেটা অ্যাট্রিবিউট বা অন্য কোনও কিছুর উপর ভিত্তি করে ফিল্টার করতে হবে।

— রাজন পল

আমার ক্ষমা, @ ব্লিজার্ড। আমি ভুল উত্তর মন্তব্য করেছে। এখনই এটি ডানদিকে আটকে দিয়েছে। # অ্যালওয়েসালংডা অ্যাট ওয়ার্ক

— পিটার বিশপ

Answer 8

এই জাতীয় নির্মাণ: সাফারি 8.0 তে$('[data-XXX=111]') কাজ করছে না ।

আপনি সেট ডেটা এই পথ বৈশিষ্ট্যাবলী এমন: $('div').data('XXX', 111), এটি শুধুমাত্র আপনাকে সেট যদি ডেটা এই মত DOM মধ্যে সরাসরি আরোপ কাজ করে: $('div').attr('data-XXX', 111)।

আমি মনে করি এটি হ'ল কারণ jQuery দল মেমরি ফাঁস এবং প্রতিটি পরিবর্তনের ডেটা অ্যাট্রিবিউটের উপর পুনর্নির্মাণের DOM এর ভারী অপারেশনগুলি রোধ করতে আবর্জনা সংগ্রহকারীকে অনুকূলিত করেছিল।

Comments

এটি আমাকে অনেক সাহায্য করেছে - যদি আমি ডেটা বা প্রপ পদ্ধতি ব্যবহার করি তবে $ ('... [[ডেটা-এক্স = "y"]') দ্বারা নির্বাচন করা কাজ করছিল না - আমি পরিবর্তে অ্যাটর ব্যবহার করেছি (এটি বৈশিষ্ট্য পরিবর্তনে ধাক্কা দেয়) ডিওএম)। থেক্স

— জর্দা

Answer 9

এটি ক্রোমে কাজ করার জন্য মানটির সাথে অন্য একটি উক্তি থাকা উচিত না ।

এটি কেবলমাত্র কাজ করে, উদাহরণস্বরূপ:

$('a[data-customerID=22]');

Comments

এটি ভুল বলে মনে হচ্ছে। কমপক্ষে এটি এখন সঠিক নয়। আমি সবেমাত্র $ ('[ডেটা-অ্যাকশন = "সেটস্ট্যাটাস"]') ব্যবহার করেছি remove সরানো ক্লাস ('অক্ষম'); Chrome এ এবং এটি পুরোপুরি কাজ করে।

— পিটার বিশপ

আমি অনুমান করি নির্বাচকটির ভিতরে "" কোনও ব্যবহার নেই, এটি হিসাবে ব্যবহার করা যেতে পারে$('[data-action=setStatus]').removeClass('disabled')

— অনিমেষ সিং ২

Answer 10

প্রোগ্রামেটিকভাবে তাদের সাথে ডেটা-আইটেম সংযুক্ত রয়েছে কিনা তার ভিত্তিতে উপাদানগুলি ফিল্টার করা বাঞ্ছনীয় (ডম-অ্যাট্রিবিউটগুলির মাধ্যমে নয়):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

উপরের কাজগুলি কিন্তু খুব পাঠযোগ্য নয়। এই ধরণের জিনিস পরীক্ষার জন্য সিউডো-সিলেক্টর ব্যবহার করা আরও ভাল পন্থা:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

এখন আমরা আরও সাবলীল এবং পাঠযোগ্য কিছুতে মূল বিবৃতিটি রিফ্যাক্টর করতে পারি:

$el.filter(":hasData('foo-bar')").doSomething();

Comments

প্রথম সমাধানটি রিটার্নের বিবৃতি মিস করে, এটি হওয়া দরকার:। এল.ফিল্টার (ফাংশন (আই, এক্স) {রিটার্ন $ (এক্স) .ডাটা ('ফু-বার');})। DoSomething ();

— সালমা গোমা

Answer 11

কেবলমাত্র 'লাইভ স্ট্যান্ডার্ড' এর কয়েকটি বৈশিষ্ট্য সহ সমস্ত উত্তর সম্পূর্ণ করতে - এখনই (এইচটিএমএল 5-যুগে) কোনও তৃতীয় পক্ষের লিবস ছাড়াই এটি করা সম্ভব:

• খাঁটি / সরল জেএস ক্যোয়ারী নির্বাচনকারী (সিএসএস-নির্বাচক ব্যবহার করে) সহ:
  • ডিওমে প্রথমটি নির্বাচন করুন: document.querySelector('[data-answer="42"],[type="submit"]')
  • সমস্ত ডিওমে নির্বাচন করুন: document.querySelectorAll('[data-answer="42"],[type="submit"]')
• খাঁটি / সরল সিএসএস
  • কিছু নির্দিষ্ট ট্যাগ: [data-answer="42"],[type="submit"]
  • একটি নির্দিষ্ট বৈশিষ্ট্যযুক্ত সমস্ত ট্যাগ: [data-answer]বাinput[type]