jquery ডেটা নির্বাচক

Question

উপাদানটির .data()অবজেক্টে সঞ্চিত মানের উপর ভিত্তি করে উপাদান নির্বাচন করতে হবে । সর্বনিম্ন, আমি নির্বাচকদের ব্যবহার করে শীর্ষ-স্তরের ডেটা বৈশিষ্ট্যগুলি নির্বাচন করতে চাই, সম্ভবত এটির মতো:

$('a').data("category","music");
$('a:data(category=music)');

অথবা সম্ভবত নির্বাচক নিয়মিত বৈশিষ্ট্য নির্বাচনকারী বিন্যাসে থাকবেন:

$('a[category=music]');

বা বৈশিষ্ট্য বিন্যাসে, তবে একটি নির্দিষ্টকারীর সাথে এটি নির্দেশ করতে এটি এতে রয়েছে .data():

$('a[:category=music]');

আমি সাধারণ দেখতে জেমস প্যাডলসির বাস্তবায়ন খুঁজে পেয়েছি , তবুও ভাল। সেই পৃষ্ঠায় দেখানো মিরর পদ্ধতির উপরে নির্বাচক বিন্যাসগুলি। এই সিজল প্যাচও রয়েছে ।

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

আদর্শভাবে, আমি ডট স্বরলিপি ব্যবহার করে ডেটাতে উপ-বৈশিষ্ট্যগুলি সমর্থন করতে চাই। এটার মত:

$('a').data("user",{name: {first:"Tom",last:"Smith"},username: "tomsmith"});
$('a[:user.name.first=Tom]');

আমি একাধিক ডেটা নির্বাচককে সমর্থন করতে চাই, যেখানে কেবলমাত্র সমস্ত নির্দিষ্ট ডেটা সিলেক্টরের উপাদান পাওয়া যায় elements নিয়মিত jquery একাধিক নির্বাচক একটি OR অপারেশন করে। উদাহরণস্বরূপ, শ্রেণি বা ) এর সাথে ট্যাগগুলি $('a.big, a.small')নির্বাচন করে । আমি একটি এনএনডি খুঁজছি, সম্ভবত এটির মতো:abigsmall

$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');

শেষ পর্যন্ত, তুলনামূলক অপারেটর এবং রেজেক্স বৈশিষ্ট্যগুলি ডেটা সিলেক্টারে উপলভ্য থাকলে এটি দুর্দান্ত হবে। তাই $(a[:artist.id>5000])সম্ভব হবে। আমি বুঝতে পারি আমি সম্ভবত filter()এটি ব্যবহার করে আরও অনেক কিছু করতে পেরেছি, তবে একটি সাধারণ নির্বাচক বিন্যাসটি পেয়ে ভাল লাগবে।

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

Comments

Jquery ইউআই কোর ব্যবহার করুন api.jqueryui.com/category/ui-core এটিতে একটি রয়েছে: ডেটা () নির্বাচনকারী

— রেজিসবস

Answer 1

আমি একটি নতুন dataনির্বাচক তৈরি করেছি যা আপনাকে নেস্টেড কোয়েরি এবং শর্তাবলী করতে সক্ষম করবে। ব্যবহার:

$('a:data(category==music,artist.name==Madonna)');

প্যাটার্নটি হ'ল:

:data( {namespace} [{operator} {check}]  )

"অপারেটর" এবং "চেক" alচ্ছিক। সুতরাং, আপনি কেবলমাত্র :data(a.b.c)এটি সহজভাবে জন্য চেক করবে truthiness এর a.b.c।

আপনি নীচের কোডে উপলব্ধ অপারেটরগুলি দেখতে পারেন। এর মধ্যে রয়েছে ~=যা রেজেক্স পরীক্ষার অনুমতি দেয়:

$('a:data(category~=^mus..$,artist.name~=^M.+a$)');

আমি এটি কয়েকটি ভিন্নতার সাথে পরীক্ষা করেছি এবং এটি বেশ ভালভাবে কাজ করছে বলে মনে হচ্ছে। আমি খুব শীঘ্রই এটি একটি গিথুব রেপো হিসাবে যুক্ত করব (সম্পূর্ণ পরীক্ষার স্যুট সহ), তাই একবার নজর রাখুন!

কোড:

(function(){

    var matcher = /\s*(?:((?:(?:\\\.|[^.,])+\.?)+)\s*([!~><=]=|[><])\s*("|')?((?:\\\3|.)*?)\3|(.+?))\s*(?:,|$)/g;

    function resolve(element, data) {

        data = data.match(/(?:\\\.|[^.])+(?=\.|$)/g);

        var cur = jQuery.data(element)[data.shift()];

        while (cur && data[0]) {
            cur = cur[data.shift()];
        }

        return cur || undefined;

    }

    jQuery.expr[':'].data = function(el, i, match) {

        matcher.lastIndex = 0;

        var expr = match[3],
            m,
            check, val,
            allMatch = null,
            foundMatch = false;

        while (m = matcher.exec(expr)) {

            check = m[4];
            val = resolve(el, m[1] || m[5]);

            switch (m[2]) {
                case '==': foundMatch = val == check; break;
                case '!=': foundMatch = val != check; break;
                case '<=': foundMatch = val <= check; break;
                case '>=': foundMatch = val >= check; break;
                case '~=': foundMatch = RegExp(check).test(val); break;
                case '>': foundMatch = val > check; break;
                case '<': foundMatch = val < check; break;
                default: if (m[5]) foundMatch = !!val;
            }

            allMatch = allMatch === null ? foundMatch : allMatch && foundMatch;

        }

        return allMatch;

    };

}());

Comments

@ জেপি: খুব মিষ্টি, আমি জানতাম আমি তোমার উপর নির্ভর করতে পারি! এখন বিছানায় রওনা হলাম, তবে আমি আগামীকাল চেষ্টা করে দেখব। ওআর অপারেশনগুলিও কি সম্ভব? আমার দরকার নেই, কৌতূহলী।

— টৌরেন

@ জেপি: এছাড়াও, আমি আপনার বনাম তাদের জন্য অন্যান্য ডেটা সিলেক্টর সলিউশন, পেশাদার / কনস সম্পর্কে আপনার গ্রহণ সম্পর্কে আগ্রহী। উদাহরণস্বরূপ, এই প্লাগইন: প্লাগইনস.জকোয়্যিরি / প্রোজেক্ট / ডেটাসিলেটর ।

— টৌরেন

ওআর ক্রিয়াকলাপ করা সম্ভব, তবে কেবলমাত্র দুটি নির্বাচক থাকা ভাল, $("a:data(condition),a:data(orCondition)")... এটির একই প্রভাব থাকবে। আপনি যত বেশি বৈশিষ্ট্য যুক্ত করবেন তত আস্তে আস্তে। যদি যুক্তি জটিল হয় তবে ব্যবহার করুন $(foo).filter(function(){...})।

— জেমস

@ জেপি: আপনি কি কখনও এটিকে একটি গিথুব প্রকল্পে পরিণত করেছেন? আমি এইচটিএমএল 5 বৈশিষ্ট্য ডেটা-টেস্ট = "500" এর সাথে একটি ইনপুটটিতে নির্বাচক or ("ইনপুট: ডেটা (পরীক্ষা> 400)") ব্যবহার করে jQuery 1.5.1 ব্যবহার করে একটি পরীক্ষা চালাচ্ছি তবে নির্বাচক কিছুই ফিরিয়ে দিচ্ছে না।

— জেমস দক্ষিণ

@ জেমসথ এটি কারণ যে এই উত্তরে নির্বাচক নিম্ন স্তরের ব্যবহার করে jQuery.data, যা এইচটিএমএল 5 বৈশিষ্ট্যে সংজ্ঞায়িত ডেটা পায় না। আপনি যে কার্যকারিতা চান, আপনি পরিবর্তন করতে পারেন jQuery.dataকরতে $('selector').data, কিন্তু যে গতির জন্য বন্ধ একটি ট্রেড করে।

— শেফ

Answer 2

এই মুহুর্তে আমি এটি নির্বাচন করছি:

$('a[data-attribute=true]')

যা ঠিক কাজ করে বলে মনে হচ্ছে, তবে jQuery 'ডেটা' উপসর্গ ছাড়াই সেই বৈশিষ্ট্যটি দ্বারা নির্বাচন করতে সক্ষম হলে এটি দুর্দান্ত হবে।

আমি গতিশীলভাবে jQuery এর মাধ্যমে উপাদানগুলিতে যুক্ত ডেটার সাথে এটি পরীক্ষা করিনি, যাতে এই পদ্ধতির পতন হতে পারে।

Comments

আমি ঠিক এটিই খুঁজছিলাম। মিষ্টি

— মাইকমুরকো

এই না আসলে কাজ আপনি সংযুক্ত / জেএস মাধ্যমে তথ্য .data () ফাংশন মাধ্যমে করে DOM, জাতীয় সঞ্চয় .data () মেমরি সংশোধন করে, অ্যাট্রিবিউট নির্বাচক শুধুমাত্র চেক

— ক্লারেন্স লিউ

আপনি যদি দয়া করে বলতে পারেন যে আপনি .ডাটা () এর মাধ্যমে সংযুক্ত হন তবে কীভাবে আপনি অ্যাট্রিবিউট দিয়ে অ্যাক্সেস করবেন?

— ম্যাক্সিম ভি ভি পাভলভ

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

— অ্যাশ

দিমিত্রি এর সমাধানটি আমার কাছে দুর্দান্ত দেখাচ্ছে কারণ এটি তৃতীয় পক্ষের কোডের উপর নির্ভর করে না।

— অ্যাশ

Answer 3

আপনি কোনও প্লাগইন ছাড়াই একটি সাধারণ ফিল্টারিং ফাংশনও ব্যবহার করতে পারেন। এটি আপনি যা চান তা ঠিক নয় তবে ফলাফলটিও একই:

$('a').data("user", {name: {first:"Tom",last:"Smith"},username: "tomsmith"});

$('a').filter(function() {
    return $(this).data('user') && $(this).data('user').name.first === "Tom";
});

Comments

এটি দুর্দান্ত ধারণা, আমি filterট্র্যাভারসাল ফাংশনটি কোনও পরীক্ষার ফাংশনটি গ্রহণ করতে পারি ভুলে গিয়েছিলাম =) ধন্যবাদ

— ক্লারেন্স লিউ

টমের সমান হওয়ার পরিবর্তে আমি কীভাবে একটি "অন্তর্ভুক্ত" করতে পারি?

— অ্যালিসো

অ্যালিসো, name.first == "টম" এর পরিবর্তে name.first && name.first.indexOF ("টম")> -1 ব্যবহার করুন;

— দিমিত্রি

Answer 4

আমি আপনাকে সতর্ক করতে চাই যা $('a[data-attribute=true]')অ্যাশলে এর জবাব অনুসারে কাজ করে না, যদি আপনি ডেটা () ফাংশনের মাধ্যমে কোনও ডিওএম উপাদানের সাথে ডেটা সংযুক্ত করেন।

এটি আপনি যেমন প্রত্যাশা করতেন তেমন কাজ করে যদি আপনি আপনার এইচটিএমএলে একটি প্রকৃত ডেটা-অ্যাটর যুক্ত করেন তবে jQuery ডেটা মেমরির মধ্যে সঞ্চয় করে, তাই আপনি যে ফলাফলগুলি পেয়েছেন $('a[data-attribute=true]')তা সঠিক হবে না।

আপনাকে ডেটা প্লাগইন ব্যবহার করতে হবে http://code.google.com/p/jquerypluginsblog/ , দিমিত্রি এর filterসমাধান ব্যবহার করতে, বা একটি উপাদান over। সমস্ত উপাদানগুলির মধ্যে পৌঁছাতে এবং .ডাটা () পুনরুক্তি পরীক্ষা করতে হবে

Comments

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

— ডন

Answer 5

একটি :data()ফিল্টার প্লাগইন রয়েছে যা কেবল এটি করে :)

আপনার প্রশ্নের উপর ভিত্তি করে কিছু উদাহরণ:

$('a:data("category=music")')
$('a:data("user.name.first=Tom")');
$('a:data("category=music"):data("artist.name=Madonna")');
//jQuery supports multiple of any selector to restrict further, 
//just chain with no space in-between for this effect

পারফরম্যান্স যা সম্ভব তার তুলনায় অত্যন্ত দুর্দান্ত হতে যাচ্ছে না , $._cacheসংশ্লিষ্ট উপাদানগুলি থেকে বাছাই করা এবং ধরে নেওয়া এখন পর্যন্ত সবচেয়ে দ্রুতগতি সম্পন্ন, তবে আপনি কীভাবে পেলেন তার পরিপ্রেক্ষিতে অনেক বেশি গোলাকার এবং খুব "jQuery-ey" নয় স্টাফ (আপনি সাধারণত উপাদান দিক থেকে আসা)। আমার মাথার শীর্ষতম অংশে, আমি নিশ্চিত নই যে এটি অনন্য আইডি থেকে উপাদানটিতে যাওয়ার প্রক্রিয়াটি পারফরম্যান্সের দিক দিয়ে নিজেই সংশ্লেষিত হওয়ার পরে এটি সবচেয়ে দ্রুত।

আপনি যে তুলনা সিলেক্টরটি উল্লেখ করেছেন সেটি করা ভাল হবে .filter(), প্লাগইনে এটির জন্য অন্তর্নির্মিত কোনও সমর্থন নেই, যদিও আপনি এটিকে অনেক ঝামেলা ছাড়াই যুক্ত করতে পারেন।

Comments

পুরো উত্তর জন্য ধন্যবাদ। আপনি কি জানেন যে এইচটিএমএল 5 টি data-*অ্যাট্রিবিউট ব্যবহার করে এবং সেগুলিতে নির্বাচন করা .data()সম্পত্তিগুলির উপরে বাছাইয়ের চেয়ে আরও দ্রুত হবে? এছাড়াও, কোনও ধারণা আমি কোথায় $ ._ ক্যাশে সম্পর্কে আরও জানতে পারি? আমি এটির জন্য গুগল করেছি, তবে খুব বেশি কিছু খুঁজে পাচ্ছি না।

— টুরেন

@ টাওরেন - আমার দোষ এটি $.cacheনয় $._cache, আপনি দেখতে পারেন এটি কীভাবে এখানে jQuery কোর প্রয়োগ করা হয়েছে এবং ব্যবহৃত হয়েছে: github.com/jquery/jquery/blob/master/src/data.js#L4 আপনি যখন কল করবেন তখন .data()এটি আসলে একটি বস্তু হিসাবে সংরক্ষণ করছে ইন $.cache[elementUniqueID], যা প্রতিটি উপাদান যেমন একটি অবিচ্ছিন্ন উপায়ে প্রয়োজন হিসাবে একটি আইডি বরাদ্দ করা হয়, যেমন, 1, 2, 3, ইত্যাদি। যে আরোহণ আইডি jQuery 1.4.3 প্রকাশ করা হবে আমার বিশ্বাস, অন্যান্য দিন গিট মন্তব্য বন্ধ ভিত্তিতে। আমি ধরে নেব এইচটিএমএল 5 রুটটি দ্রুততর হবে, ব্রাউজারের অপ্টিমাইজেশানগুলি উপলব্ধ কিনা তা নির্ভর করে (আমি নিশ্চিত যে আরও বেশি পাওয়া যাবে)।

— নিক ক্র্যাভার

Answer 6

আপনি data-*একটি এলম ব্যবহার করে একটি বৈশিষ্ট্য সেট করতে পারেন attr()এবং তারপরে সেই বৈশিষ্ট্যটি ব্যবহার করে নির্বাচন করুন:

var elm = $('a').attr('data-test',123); //assign 123 using attr()
elm = $("a[data-test=123]"); //select elm using attribute

এবং এখন সেই এলমের পক্ষে attr()এবং উভয়ই 123data() উপার্জন করবে :

console.log(elm.attr('data-test')); //123
console.log(elm.data('test')); //123

যাইহোক, যদি আপনি মান পরিবর্তন হতে 456 ব্যবহার attr(), data() এখনও হতে হবে 123 :

elm.attr('data-test',456); //modify to 456
elm = $("a[data-test=456]"); //reselect elm using new 456 attribute

console.log(elm.attr('data-test')); //456
console.log(elm.data('test')); //123

সুতরাং আমি এটি বুঝতে পারছি বলে মনে হচ্ছে আপনার যদি না করতে হয় তবে আপনার সম্ভবত কোডিংয়ের আদেশগুলি attr()এবং data()কমান্ডগুলি সম্পর্কে পরিষ্কার হওয়া উচিত । কারণ attr()মনে হয় এটি সরাসরি DOM এর data()সাথে মিল রয়েছে যেখানে 'মেমরি'র সাথে ইন্টারঅ্যাক্ট করে, যদিও এর প্রাথমিক মানটি ডিওএম থেকে হতে পারে। তবে মূল বক্তব্যটি হ'ল দু'টি একেবারেই সিঙ্ক হয় না।

তাই শুধু সাবধান।

যে কোনও হারে, আপনি যদি data-*ডিওএম বা স্মৃতিতে বৈশিষ্ট্যটি পরিবর্তন না করে থাকেন তবে আপনার কোনও সমস্যা হবে না। আপনি যখন মান পরিবর্তন করতে শুরু করবেন তখনই হ'ল যখন সম্ভাব্য সমস্যা দেখা দিতে পারে।

@ অ্যাশ এর উত্তর, পাশাপাশি এই পোস্টে @ ক্লারেন্স লিউকে ধন্যবাদ জানাই ।

Answer 7

$('a[data-category="music"]')

এটা কাজ করে। দেখুন সমকক্ষ স্থীর কর নির্বাচক [NAME = "মান"] ।

Answer 8

আপনি যদি jQueryUI ব্যবহার করেন তবে আপনি :dataএটির সাথে নির্বাচকটির একটি (সাধারণ) সংস্করণ পাবেন যা কোনও ডেটা আইটেমের উপস্থিতি পরীক্ষা করে, যাতে আপনি এর মতো কিছু করতে পারেন $("div:data(view)"), বা $( this ).closest(":data(view)")।

Http://api.jqueryui.com/data-selector/ দেখুন । আমি জানি না তারা কত দিন ধরে ছিল, কিন্তু এখন সেখানে!

Comments

এটি কেবল যেমনটি বলেছে তেমন ডেটা আইটেম উপস্থিতি পরীক্ষা করে। এটি মানগুলি পরীক্ষা করে না (ডক্স অনুসারে)। যদিও এ সম্পর্কে জেনে ভাল

— লাগছে

Answer 9

এখানে একটি প্লাগইন যা জীবনকে সহজ করে তোলে https://github.com/rootical/jQueryDataSelector

এটি এর মতো ব্যবহার করুন:

data selector           jQuery selector
  $$('name')              $('[data-name]')
  $$('name', 10)          $('[data-name=10]')
  $$('name', false)       $('[data-name=false]')
  $$('name', null)        $('[data-name]')
  $$('name', {})          Syntax error