আমি কীভাবে jQuery এর একাধিক ক্লাস সহ একটি উপাদান নির্বাচন করতে পারি?


2060

আমি সব উপাদান দুটি ক্লাস আছে নির্বাচন করতে চান aএবং b

<element class="a b">

সুতরাং, শুধুমাত্র উপাদান আছে উভয় ক্লাস।

আমি যখন $(".a, .b")এটি ব্যবহার করি তখন আমাকে ইউনিয়ন দেয় তবে আমি ছেদটি চাই।


2
আপনি আমাদের জন্য নতুন ইউনিয়ন এবং ছেদ কী বোঝায় তা সংজ্ঞায়িত করতে পারলে ভালো লাগবে :)
ক্যানিয়ন

10
@ কলবক্যানিয়ন ইউনিয়ন এবং ছেদটি মূল সেট থিয়ো ধারণা theory উদাহরণস্বরূপ, ইউনিয়ন হ'ল সমস্ত ফরাসী বক্তারা (পুরুষ এবং মহিলা উভয়ই অন্তর্ভুক্ত), তবে একটি ছেদটি এমন সমস্ত মহিলা হবে যারা ফরাসী ভাষায় কথা বলে (যারা ফরাসী ভাষায় কথা বলে না এমন প্রত্যেককে বাদ দেয় এবং মহিলা নয় এমন সমস্ত লোককে বাদ দেয়)। ইউনিয়ন এবং ছেদগুলি প্রতিটি সেটকে সংজ্ঞায়িত করে এমন অনেকগুলি বৈশিষ্ট্য সহ তৈরি করা যেতে পারে। en.wikedia.org/wiki/Union_(set_theory) en.wikiki.org/wiki/Intersication_(set_theory)
ক্যাথারিন ওসবার্ন

6
আমি মনে করি আপনি "মহিলা" এবং "ফরাসি-স্পিকার" এই দুটি সেটগুলির অর্থ, এই ইউনিয়নটি বিশ্বের সমস্ত মহিলা এবং বিশ্বের ফরাসি-স্পিকার হবে, এমন একটি সেট যা উভয় মহিলাকে অন্তর্ভুক্ত করে যারা কথা বলতে পারে না ফরাসী এবং ফরাসী ভাষী পুরুষ। ছেদটি যেমনটি আপনি লিখেছেন, কেবলমাত্র সেই মহিলারা যারা ফরাসী ভাষায় কথা বলেন।
টিমু লেইস্তি

উত্তর:


2625

আপনি যদি উভয় শ্রেণির (একটি ছেদ, যেমন একটি লজিকাল এবং এর সাথে) কেবলমাত্র উপাদানগুলির সাথে মেলে করতে চান তবে কেবল নির্বাচকদের মধ্যে ফাঁকা ছাড়াই লিখুন :

$('.a.b')

অর্ডার প্রাসঙ্গিক নয়, সুতরাং আপনি ক্লাসগুলিও অদলবদল করতে পারেন:

$('.b.a')

সুতরাং ক্লাসগুলির সাথে divএকটি আইডি রয়েছে এমন কোনও উপাদানটির সাথে মেলে এবং আপনার লিখতে হবে:abc

$('div#a.b.c')

(অনুশীলনে, আপনার সম্ভবত এটি নির্দিষ্ট হওয়ার দরকার নেই, এবং কোনও আইডি বা শ্রেণি নির্বাচক নিজে থেকেই যথেষ্ট হয় $('#a'):))


9
@ ফ্লাটার: এটি কেবল উদাহরণের জন্য ছিল। তবে এটি কার্যকর হতে পারে যদি ক্লাসগুলি bএবং cগতিশীলভাবে যুক্ত করা হয়, এবং আপনি কেবলমাত্র উপাদানটি বেছে নিতে চান যদি এটির ক্লাস থাকে।
সাশা চেদিগোভ

3
আহা, ভালো কথা :-) এখন অবধি আমি ব্যবহার করেছি hasহাস ক্লাস () তবে এটি একটি উপায় ভাল স্বরলিপি।
1212 তে ফ্ল্যাটার

4
এই নির্বাচনের এই পদ্ধতিটি সিএসএসের জন্যও কাজ করে eg শৈলীর বৈশিষ্ট্যগুলি c
ক্রিস

30
@ শিম্মি: হ্যাঁ দুটি নির্বাচকদের মধ্যে একটি স্থান মানে আপনি বংশধরদের সন্ধান করছেন; অর্থাত .a .bশ্রেণীর সাথে bএমন উপাদানগুলির সন্ধান করে যা শ্রেণীর সাথে একটি উপাদানের বংশধর a। তাই ভালো কিছু div aশুধুমাত্র ফিরে আসবে aযে উপাদান আছে ভিতরে একটি divউপাদান।
শাশা চেদিগোভ

2
@ এএএ: এটি ভুল; jQuery শুরুর পর থেকে এটি এভাবেই ছিল, কারণ সিএসএস এভাবেই কাজ করে। কমাটি নির্বাচকগুলির সাথে মেলে এমন উপাদানগুলি নির্বাচন করে (এটিকে যৌক্তিক OR হিসাবে মনে করুন), উভয়ই নয়, সুতরাং এটি একই জিনিস নয় (যদিও আমি দেখতে পাচ্ছি কীভাবে এটি বিভ্রান্তিকর হতে পারে)।
সাশা চেদিগোভ

174

আপনি filter()ফাংশনটি ব্যবহার করে এটি করতে পারেন :

$(".a").filter(".b")

16
এই উত্তর এবং গৃহীত উত্তর মধ্যে পার্থক্য কি?
ভিভিয়ান নদী

49
@ রাইস: এটি একটি সামান্য ধীর হবে, কারণ এটি "a" শ্রেণীর সাথে প্রথম শ্রেণীর অবজেক্টগুলির একটি তালিকা তৈরি করবে, তারপরে "বি" শ্রেণিযুক্ত সমস্তগুলি সরিয়ে ফেলবে, অন্যদিকে খনিটি এক ধাপে এটি করে। তবে অন্যথায়, কোনও পার্থক্য নেই।
সাশা চেদিগোভ

5
এটি আমার জন্য এমন পরিস্থিতিতে কাজ করেছিল যেখানে আমি একটি ভেরিয়েবল হিসাবে সংজ্ঞায়িত শ্রেণীর সন্ধান করছিলাম, যা প্রথম উদাহরণে সিনট্যাক্সের সাথে কাজ করে না। যেমন: $ ('। foo')। ফিল্টার (পরিবর্তনশীল)। ধন্যবাদ
প্যাক

7
@ প্যাক: $ ('। foo' + পরিবর্তনশীল) এর কৌশলটি করা উচিত ছিল, তবে আমি দেখতে পাচ্ছি যে এই ক্ষেত্রে এই পদ্ধতিটি আরও পরিষ্কার হবে।
সাশা চেদিগোভ

6
এটি ইতিমধ্যে আরও কার্যকর যদি আপনি ইতিমধ্যে খুঁজে পেয়েছেন .aএবং একাধিকবার ফিল্টার করা প্রয়োজন ভিত্তিক বিভিন্ন স্বেচ্ছাসেবীর ক্লাস যা মূল .aসেটও অন্তর্ভুক্ত।
কিউস - মনিকা

123

মামলার জন্য

<element class="a">
  <element class="b c">
  </element>
</element>

আপনার মাঝে .aএবং এর মধ্যে একটি স্থান রাখা দরকার.b.c

$('.a .b.c')

আপনার উত্তরে যুক্ত করে আমি জানতে চাই যে কীভাবে খ এবং সি উভয় অ্যাক্সেস করতে হবে যদি কেসটি নীচের মত হয়: <উপাদান শ্রেণি = "এ"> <উপাদান শ্রেণি = "বি"> </ এলিমেন্ট> <উপাদান শ্রেণি = "সি" > <<<<<<<<<? $ ('। A .b.c') এর মাধ্যমে ভুল ফলাফল দেয়।
ইপ্সিতা রাউট

এই উদাহরণে, নির্বাচক $('.a .c.b')এছাড়াও কাজ করবে?
ড্যানিয়েল ডাব্লু।

হ্যাঁ, আদেশটি যেমন কিছু আসে না তেমন।
জিম 84

$('.a > element')
অ্যালেক্স

63

আপনার যে সমস্যা হচ্ছে তা হ'ল আপনি একটি ব্যবহার করছেন Group Selector , তবে আপনার ব্যবহার করা উচিত Multiples selector! আরও সুনির্দিষ্ট হওয়ার জন্য, আপনি যখন ব্যবহার করছেন তখন আপনি ব্যবহার $('.a, .b')করছেন $('.a.b')

আরও তথ্যের জন্য, এখানে নির্বাচকদের একত্র করার বিভিন্ন উপায়গুলির সংক্ষিপ্ত বিবরণ দেখুন!


গ্রুপ নির্বাচক: ","

সমস্ত <h1>উপাদান এবং সমস্ত <p>উপাদান এবং সমস্ত <a>উপাদান নির্বাচন করুন :

$('h1, p, a')

গুণক নির্বাচনকারী: "" (কোনও অক্ষর নেই)

ক্লাস এবং এর সাথে সমস্ত <input>উপাদান নির্বাচন করুন :type textcodered

$('input[type="text"].code.red')

বংশোদ্ভূত নির্বাচক: "" (স্থান)

<i>উপাদানগুলির মধ্যে থাকা সমস্ত উপাদান নির্বাচন করুন <p>:

$('p i')

শিশু নির্বাচনকারী: ">"

সমস্ত <ul>উপাদান নির্বাচন করুন যা কোনও উপাদানের তাত্ক্ষণিক শিশু <li>:

$('li > ul')

সংলগ্ন ভাইবোন নির্বাচক: "+"

<a>উপাদানগুলির সাথে সাথে স্থাপন করা সমস্ত উপাদান নির্বাচন করুন <h2>:

$('h2 + a')

সাধারণ ভাইবোন নির্বাচক: "~"

এমন সমস্ত <span>উপাদান নির্বাচন করুন যা উপাদানগুলির সহোদর <div>:

$('div ~ span')


26

উপাদান সহ আরও একটি মামলা উল্লেখ করুন:

যেমন <div id="title1" class="A B C">

লিখো: $("div#title1.A.B.C")



20

আরও ভাল পারফরম্যান্সের জন্য আপনি ব্যবহার করতে পারেন

$('div.a.b')

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


9

গ্রুপ নির্বাচক

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

এটি হয়ে:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

সুতরাং আপনার ক্ষেত্রে আপনি গ্রুপ নির্বাচনকারীকে চেষ্টা করেছেন যেখানে এটি একটি ছেদযুক্ত

$(".a, .b") 

পরিবর্তে এটি ব্যবহার করুন

$(".a.b") 

4

আপনি প্রয়োজন হবে না jQueryএই জন্য

ইন Vanillaআপনি কি করতে পারেন:

document.querySelectorAll('.a.b')

2018 সালে সত্য, কিন্তু wnen এই প্রশ্নের 2009 সালে জিজ্ঞাসা করা হল না
Michiel

3

আপনার কোড $(".a, .b")একাধিক উপাদান নীচে জন্য কাজ করবে (একই সময়ে)

<element class="a">
<element class="b">

যদি আপনি <element class="a b">কোমা ছাড়াই জেএস ব্যবহারের চেয়ে একটি এবং বি উভয় শ্রেণীর মতো উপাদান নির্বাচন করতে চান

$('.a.b')

2

আপনি getElementsByClassName()যা চান তার জন্য আপনি পদ্ধতিটি ব্যবহার করতে পারেন।

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);
<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>

এটিও দ্রুততম সমাধান। আপনি এখানে সে সম্পর্কে একটি মানদণ্ড দেখতে পারেন ।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.