একাধিক ক্লাস সহ উপাদানগুলি কীভাবে পাবেন

Question

বলুন আমার কাছে এটি রয়েছে:

<div class="class1 class2"></div>

আমি এই divউপাদানটি কীভাবে নির্বাচন করব ?

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

যে কাজ করে না।

আমি জানি যে, jQuery এ, এটি রয়েছে $('.class1.class2')তবে আমি এটি ভ্যানিলা জাভাস্ক্রিপ্ট দ্বারা নির্বাচন করতে চাই।

Answer 1

এটি আসলে jQuery এর সাথে খুব মিল:

document.getElementsByClassName('class1 class2')

এমডিএন ডক পান এলিমেস্টাই ক্লাসনাম

Comments

কি শুধুমাত্র একটি বর্গ সঙ্গে উপাদান পেয়ে, যা নিদিষ্ট @Joe এক সম্পর্কে

— CodeGuru

আমার মনে আছে ক্লাসগুলি "ছাড়া" আসে comes ডকুমেন্ট.জেট এলিমেন্টসাই ক্লাসনাম ('class1 class2')

— মিশা বেসকিন

প্রদত্ত এমডিএন লিঙ্কে, getE উপাদান প্যারামিটারে বর্গের নামের আগে বিন্দু ব্যবহার করা হয় না। আমি এটি ফায়ারফক্সের পাশাপাশি ক্রোমেও পরীক্ষা করেছিলাম এবং এটি বিন্দু ছাড়া কাজ করে তবে বিন্দু দিয়ে নয়।

— গৌরব সিং

Answer 2

এবং (উভয় শ্রেণি)

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

বা (কমপক্ষে একটি শ্রেণি)

var list = document.querySelectorAll(".class1,.class2");

এক্সওআর (এক শ্রেণি কিন্তু অন্য নয়)

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

নন্দ (উভয় শ্রেণি নয়)

var list = document.querySelectorAll(":not(.class1),:not(.class2)");

উত্তর (দুটি শ্রেণির কোনও নয়)

var list = document.querySelectorAll(":not(.class1):not(.class2)");

Comments

এটি চমৎকার. শীর্ষ হতে হবে।

— হ্যাকস্টার

Answer 3

স্ট্যান্ডার্ড ক্লাস সিলেক্টরস সহ ক্যোয়ারিলেক্টরও এই জন্য কাজ করে।

document.querySelectorAll('.class1.class2');

Comments

এটি কাজ করে না, এটি হওয়া দরকার document.querySelectorAll('.class1, .class2');

— বাজলেব্রাশ

@ বাজলেব্রাশ ব্রাশ আপনার নির্বাচক .class1ওআর দিয়ে উপাদানগুলি ক্যাপচার করবে .class2, যখন উপরের একজনটি কেবল উভয় শ্রেণীর সাথে উপাদানগুলি ক্যাপচার করবে এবং বাস্তবে এটি কাজ করবে does এই পরীক্ষার কনসোল আউটপুটটি দেখুন: jsfiddle.net/0ph1p9p2

— filoxo

ঠিক আছে, আমার খারাপ, ওপি কী করতে চায় তা আমি ভুল বুঝেছি। তবে আইএমও আরও সাধারণ ব্যবহারের ক্ষেত্রে হ'ল এমন উপাদান নির্বাচন করতে চান যা উভয় শ্রেণীর বা উভয়ই রয়েছে, সেক্ষেত্রে আমার উদাহরণটি আপনি চান তা।

— বাজলেব্রাশ

Answer 4

@ ফিলোক্সো যেমন বলেছিলেন, আপনি এটি ব্যবহার করতে পারেন document.querySelectorAll।

আপনি যদি জানেন যে আপনি যে শ্রেণীর সন্ধান করছেন সেখানে একটি মাত্র উপাদান রয়েছে বা আপনি কেবল প্রথম শ্রেণিতেই আগ্রহী, আপনি ব্যবহার করতে পারেন:

document.querySelector('.class1.class2');

বিটিডাব্লু, যদিও উভয় শ্রেণীর .class1.class2সাথে একটি উপাদান নির্দেশ করে , (শ্বেত স্পেসটি লক্ষ্য করুন) একটি শ্রেণিবিন্যাস নির্দেশ করে - এবং শ্রেণীর সাথে উপাদান যা শ্রেণীর সাথে এন উপাদানগুলির ভিতরে থাকে : .class1 .class2class2class1

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

এবং যদি আপনি সরাসরি শিশুকে পুনরুদ্ধার করতে বাধ্য করতে চান তবে >সাইন ( .class1 > .class2) ব্যবহার করুন :

<div class='class1'>
  <div class='class2'>
    :
    :

নির্বাচকদের সম্পর্কে পুরো তথ্যের জন্য:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

Answer 5

এইচটিএমএল

<h2 class="example example2">A heading with class="example"</h2>

জাভাসক্রিপ কোড

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

ক্যোয়ারিসিলেটরআল () পদ্ধতিটি নথির সমস্ত উপাদানকে একটি নির্দিষ্ট সিএসএস নির্বাচক (গুলি) এর সাথে স্ট্যাটিক নোডলিস্ট অবজেক্ট হিসাবে ফিরিয়ে দেয়।

নোডলিস্ট অবজেক্ট নোডগুলির সংকলন উপস্থাপন করে। নোডগুলি সূচক সংখ্যা দ্বারা অ্যাক্সেস করা যায়। সূচকটি 0 থেকে শুরু হয়।

https://www.w3schools.com/jsref/met_docament_queryselectorall.asp সম্পর্কে আরও জানুন

== ধন্যবাদ ==

Answer 6

ঠিক আছে এই কোডটি আপনার যা প্রয়োজন ঠিক তা করে:

এইচটিএমএল:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

জাতীয়:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

আশা করি এটা সাহায্য করবে! ;)

Answer 7

আসলে @বাজলেব্রশের জবাব এবং @ ফিলক্সোর মন্তব্য আমাকে অনেক সাহায্য করেছে।

ক্লাসটি "জেডএইও" বা "জেডএ জেডএ" হতে পারে যেখানে উপাদানগুলি সন্ধান করার দরকার ছিল

Jquery ব্যবহার করে আমি প্রথমে পছন্দসই উপাদানগুলির পিতামাতার নির্বাচন করি:

('এবিসি' এবং স্টাইল দিয়ে ক্লাস দিয়ে একটি ডিভ! = 'প্রদর্শন: কিছুই নয়')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];                   

তারপরে সেই উপাদানটির পছন্দসই বাচ্চারা:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

পুরোপুরি কাজ করে! নোট করুন আপনাকে ডকুমেন্ট.ইউইউউইরি সিলেক্টর করতে হবে না আপনি উপরের মতো একটি প্রাক-নির্বাচিত অবজেক্টে পাস করতে পারেন।