এইচটিএমএল 5 ব্যবহার করে কাস্টম ডেটা অ্যাট্রিবিউটে jQuery নির্বাচনকারীগণ

Question

এইচটিএমএল 5 এর সাথে আসা এই ডেটা অ্যাট্রিবিউটগুলির জন্য নির্বাচকরা কী উপলব্ধ তা জানতে চাই।

এইচটিএমএলের এই অংশটি উদাহরণ হিসাবে নেওয়া:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

সেখানে কি নির্বাচক রয়েছে:

• data-company="Microsoft"নীচে সমস্ত উপাদান"Companies"
• data-company!="Microsoft"নীচে সমস্ত উপাদান"Companies"
• অন্যান্য ক্ষেত্রে যেমন "নির্বাচিত, তার চেয়ে কম, ইত্যাদি ..." ইত্যাদি অন্যান্য নির্বাচক ব্যবহার করা সম্ভব।

Comments

আপনি যদি এখানে দেখেন তবে api.jquery.com/category/selectors :-)

— অ্যালান

সদৃশ: স্ট্যাকওভারফ্লো.com

— কাই নোক

Answer 1

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

JQuery নির্বাচনকারীদের দিকে তাকান : রয়েছে একটি নির্বাচক

এখানে তথ্য রয়েছে: নির্বাচক রয়েছে

Comments

এই কাজ করবে? $('div[data-col="1"][data-row="2"]') এটি কি ডিভটি নির্বাচন করবে যেখানে ডেটা-কল সমান 1 এবং ডেটা-সারি 2 এর সমান হয়, বা এটি যে কোনও একটিতে নির্বাচন করবে?

— LuudJacobs

.Data ('কিছু', মান) এর মাধ্যমে ডেটা সেট করা থাকলে এই কাজ করবে? প্রায়শই এটি মান সংযুক্ত করার সময় একটি আসল বৈশিষ্ট্য তৈরি করে না। আমি জানি ওপি বৈশিষ্ট্যগুলি সম্পর্কে বেশ সুনির্দিষ্ট ছিল, তবে ভেবেছি অন্যরা যদি এই নির্বাচককে সমস্যা দেয় তবে আমি সচেতনতা বাড়াব।

— অ্যারোনএলএস

@ অ্যারোনলএস না এটি (কমপক্ষে jQuery উদাহরণস্বরূপ, পুরানো সংস্করণগুলি সহ উদাহরণস্বরূপ না .attr('data-something', 'value')। স্ট্যাকওভারফ্লো

— ম্যাটি জে

dataকলটিতে টাইপ না করে ডেটা অ্যাট্রিবিউট মান পাওয়ার কোনও উপায় নেই ?

— আহ্নবিজক্যাড

@gWo$('#element').data('something')

— গৌই

Answer 2

jQuery UIএকটি :data()নির্বাচক আছে যা ব্যবহার করা যেতে পারে। সংস্করণ 1.7.0 থেকে এটি প্রায় হয়েছে ।

আপনি এটি এর মতো ব্যবহার করতে পারেন:

একটি data-companyবৈশিষ্ট্য সহ সমস্ত উপাদান পান

var companyElements = $("ul:data(group) li:data(company)");

data-companyসমান যেখানে সমস্ত উপাদান পানMicrosoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

data-companyসমান নয় এমন সমস্ত উপাদান পানMicrosoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

ইত্যাদি ...

নতুন :data()নির্বাচকটির একটি সতর্কতা হ'ল এটি নির্বাচনের জন্য আপনাকে কোড দ্বারাdata মানটি নির্ধারণ করতে হবে। এর অর্থ এই যে উপরে কাজ করার জন্য, এইচটিএমএল-এ সংজ্ঞা দেওয়া যথেষ্ট নয় not আপনাকে অবশ্যই প্রথমে এটি করতে হবে:data

$("li").first().data("company", "Microsoft");

এটি এমন একক পৃষ্ঠার অ্যাপ্লিকেশনগুলির জন্য সূক্ষ্ম যেখানে আপনি সম্ভবত $(...).data("datakey", "value")এই বা অনুরূপ উপায়ে ব্যবহার করতে পারেন ।

Comments

আমি তোমার ক্যাভেট পাচ্ছি না এটি আমার পক্ষে ভাল কাজ করে এবং আমি জেএস-এর ডেটাতে অন্য কোনও রেফারেন্স করি না। $ ( '# আইডি') পাঠ্য ($ ( '# mydatasource') তথ্য ( 'খালি')।)। এটি # মাইডিটাসোর্স উপাদানটিতে ডেটা-খালি ট্যাগের সামগ্রীর সাথে # আইডি উপাদানটি তৈরি করবে।

— সাইপ্রাস

@ ফেইসবুক অ্যানসার্স আপনি :data()নির্বাচক বা .data()পদ্ধতিটি ব্যবহার করেছেন ?

— রাগস্

আমি বুঝছি তুমি কি বলতে চাও. আমি পদ্ধতিটি ব্যবহার করছিলাম, যেখানে আপনার সতর্কতামূলক পদ্ধতিটি উল্লেখ করা হয়েছে।

— সাইপ্রাসে

^ আপনার অর্থ তার নির্বাচনের বিষয়ে নির্বাচককে উল্লেখ করা হয়েছে।

— আহ্নবিজক্যাড

অদ্ভুত, এখন এটি জ্যাকুরি

— কাই নাক

Answer 3

jsFiddle Demo

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

মৌলিক কুয়েরিং উপরে আবৃত করা হয়েছে, এবং ব্যবহার জন Hartsock এর উত্তর করতে পারেন যে ডেটা-কোম্পানী উপাদান পাওয়া, অথবা মাইক্রোসফট ছাড়া প্রতি এক (বা অন্য কোন সংস্করণ পেতে সেরা বাজি হতে যাচ্ছে :not)।

আপনি যে অন্য পয়েন্টগুলি সন্ধান করছেন তাতে এটি প্রসারিত করতে আমরা বেশ কয়েকটি মেটা নির্বাচক ব্যবহার করতে পারি। প্রথমত, যদি আপনি একাধিক ক্যোয়ারী করতে চলেছেন তবে পিতামাতার পছন্দটি ক্যাশে করে দেওয়া ভাল।

var group = $('ul[data-group="Companies"]');

এরপরে, আমরা এই সেটগুলিতে জি দিয়ে শুরু হওয়া সংস্থাগুলি সন্ধান করতে পারি

var google = $('[data-company^="G"]',group);//google

অথবা সম্ভবত সংস্থাগুলি যেখানে শব্দটি নরম রয়েছে

var microsoft = $('[data-company*="soft"]',group);//microsoft

যার উপাদানগুলির ডেটা অ্যাট্রিবিউটের সমাপ্তি মেলে এমন উপাদানগুলি পাওয়াও সম্ভব

var facebook = $('[data-company$="book"]',group);//facebook

//stored selector
var group = $('ul[data-group="Companies"]');

//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');

//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');

//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>

Answer 4

খাঁটি / ভ্যানিলা জেএস সমাধান ( এখানে কার্যকারী উদাহরণ )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

ইন querySelectorAll আপনি বৈধ ব্যবহার করা আবশ্যক CSS নির্বাচনকারী (বর্তমানে Level3 )

JQuery এবং খাঁটি জেএস-এর জন্য স্পিড টেস্ট (2018.06.29): ক্রোম 67.0.3396.99 (64-বিট), সাফারি 11.0.3 (13604.5.6), ফায়ারফক্স 59.0.2 (64) এ ম্যাকওস হাই সিয়েরা 10.13.3 এ পরীক্ষা করা হয়েছিল -বিট). স্ক্রিনশটের নীচে দ্রুত ব্রাউজারের জন্য ফলাফল দেখায় (সাফারি):

পিওরজেএস ক্রোমের প্রায় 12%, ফায়ারফক্সে 21% এবং সাফারিতে 25% জিকুয়েরির চেয়ে দ্রুত ছিল। আকর্ষণীয়ভাবে ক্রোমের জন্য গতি ছিল প্রতি সেকেন্ডে 18.9M অপারেশন, ফায়ারফক্স 26 এম, সাফারি 160.9M (!)।

তাই বিজয়ী হলেন পিউরজেএস এবং দ্রুত ব্রাউজারটি সাফারি (ক্রোমের চেয়ে 8x এরও বেশি দ্রুত!)

এখানে আপনি আপনার মেশিনে পরীক্ষা করতে পারেন: https://jsperf.com/js-selectors-x