jquery - তথ্য বৈশিষ্ট্য দ্বারা উপাদান নির্বাচন




html5 custom-data-attribute (8)

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

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


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

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

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

html: <div data-id="container"></div>

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

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

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

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

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

এইচটিএমএল:

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

একাধিক (OR) তথ্য মান উপর ভিত্তি করে উপাদান পান

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://"]')

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

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

এই জন্য ক্রোমে কাজ করার জন্য মূল্যটি অবশ্যই কোটগুলির অন্য জোড়া থাকবে না

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

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

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

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

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

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

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

$("[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>

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

যাচাই করুন (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"]');

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

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

উল্লেখ্য যে নির্বাচকদের API ( document.querySelector{,all} ) এর সাথে সামঞ্জস্যের জন্য, গুণমানের মান ( 22 ) এর কাছাকাছি উদ্ধৃতিগুলি এই ক্ষেত্রে বাদ দেওয়া যাবে না

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







custom-data-attribute