শ্রেণীর নাম অনুসারে কীভাবে শিশু উপাদান পাবেন?

Question

আমি ক্লাস = 4 সহ শিশুটির স্প্যান পাওয়ার চেষ্টা করছি Here এখানে একটি উদাহরণ উপাদান রয়েছে:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

আমার কাছে যে সরঞ্জামগুলি উপলভ্য তা হ'ল জেএস এবং ওয়াইউআই 2। আমি এরকম কিছু করতে পারি:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

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

আমার মনে হয় আমার যা দরকার তা হল ক্রিম ব্রাউজার getElementsByClassName বা আমাকে ডক.গেটএলিমেন্টস বাইট্যাগনাম ('স্প্যান') ব্যবহার করতে হবে এবং আমি ক্লাস 4 না পাওয়া পর্যন্ত লুপটি ব্যবহার করব তবে আমি কীভাবে এটি করব তা নিশ্চিত নই।

Comments

এখানে এটা stackoverflow.com/questions/3808808/...

— Mostar

যথেষ্ট মজার বিষয়, আরও শক্তিশালী querySelectorAllIE 8+ দ্বারা সমর্থিত তবে getElementsByClassNameকেবল আই 9+ দ্বারা সমর্থিত। আপনি যদি আই 7 ড্রপ করতে পারেন তবে আপনি ব্যবহারে নিরাপদ querySelectorAll('.4')। যাইহোক, 4একটি অবৈধ শ্রেণীর নাম।

— প্রিনজর্ন

@ পারটিবিট এই প্রশ্নটি কার্যকর করে না কারণ এটি এখনও এলিজেন্টবাইক্লাসনাম ব্যবহার করে এবং IE এর পুরানো সংস্করণ এটি সমর্থন করে বলে মনে হয় না। সম্পাদনা: আমি দুঃখিত এটি ট্যাগ নাম ব্যবহার করে। এটি কাজ করতে পারে।

— spyderman4g63

@ প্রিনজর্ন আমার কাছে এই পণ্যটিতে কোনও কারণে YUI2 নির্বাচনকারী ইউটিলিটি উপলব্ধ নেই।

— spyderman4g63

@ spyderman4g63 আমি YUI2 নির্দিষ্ট কোনও বিষয়ে কথা বলিনি। document.querySelectorAllডম এবং এটি ইউইউআইয়ের সাথে কোনও সম্পর্ক রাখে না

— প্রিনজর্ন

Answer 1

doc.childNodesপ্রতিটি মাধ্যমে পুনরাবৃত্তি করতে ব্যবহার করুন span, এবং তারপরে যার classNameসমান তাকে ফিল্টার করুন 4:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

​

Comments

সমস্যাটি হ'ল getElementsByClassName আইই 8 তে কাজ করে না।

— spyderman4g63

উপাদানটির একাধিক শ্রেণি থাকলে এই কোডটি কাজ করে না। উদাহরণস্বরূপ: আপনি যদি "এক" শ্রেণীর উপাদানগুলি সন্ধান করেন এবং আপনার উপাদানগুলিতে "এক দুই তিন" শ্রেণি রয়েছে, তবে এই ফাংশনটি তাদের খুঁজে পাবে না।

— ফ্রাঙ্ক ভেরোনা

@ ফ্রানভেরোনা কৌতুহলের ঠিক বাইরে, কোনও সাধারণ "ইনডেক্স অফ ('শ্রেণীর নাম')> -1" একাধিক শ্রেণীর সমস্যা সমাধান করবে না?

— জেমস পোলুস

@ জেমসপলুস, এটি হবে না । ছোট এবং বড় দুটি উপাদানকে দুটি শ্রেণিতে সেট করার কথা বিবেচনা করুন। thatElement.className "ছোট বড়" এর সমান একটি স্ট্রিং ফেরত দেবে। যদি আপনি বিগ বলে মাইলেমেন্টক্লাসনেম.ইন্ডেক্সঅফ ("বড়") নামে একটি শ্রেণীর সন্ধান করছেন তবে বাস্তবে শ্রেণীর অংশ না হয়েও negativeণাত্মক 1 থেকে অসম কিছু তৈরি করবে। আপনার শ্রেণীর নামগুলির যদি 100% নিয়ন্ত্রণ থাকে তবে এগুলি ঠিকঠাক কাজ করবে, এটি কেবল গ্যারান্টিযুক্ত নয়, বিশেষত যখন আপনার লেখার কোড যা কোডের সাথে ইন্টারেক্ট করতে চলেছে আপনার সম্পূর্ণ নিয়ন্ত্রণ থাকবে না।

— ডেডবয়

আপনার অনুরূপে একটি রেজেক্স ম্যাচ ব্যবহার করা উচিত className: if(doc.childNode[i].className.match("\s*" + search_class + "\s*")যেখানে ভেরিয়েবলটি search_classআপনি খুঁজছেন এমন শ্রেণীর নাম।

— ওয়েবউন্ডারার

Answer 2

ক্যোয়ারী নির্বাচনকারী এবং ক্যোয়ারী নির্বাচনকারী সমস্ত ব্যবহার করুন

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

আইই 9 এবং উচ্চতর

;)

Comments

আপনার স্মার্ট সমাধানের জন্য ধন্যবাদ!

— তাই জিন ইউয়ান

এটি কেবল বাচ্চাদের নয়, সমস্ত বংশধরদের জন্য পরীক্ষা করে।

— সুম 1

Answer 3

গৃহীত উত্তরটি কেবল তাত্ক্ষণিক শিশুদের পরীক্ষা করে। প্রায়শই আমরা সেই শ্রেণীর নাম সহ কোনও বংশধরকে সন্ধান করি।

এছাড়াও, কখনও কখনও আমরা কোন সন্তান চাই রয়েছে একটি classname।

উদাহরণস্বরূপ: <div class="img square"></div>ClassName "img" এর সাথে কোনও অনুসন্ধানের সাথে মিল থাকা উচিত, যদিও এটি সঠিক ক্লাসেরনেম "img" নয়।

এই উভয় সমস্যার সমাধান এখানে:

শ্রেণীর সাথে একটি বংশধর উপাদানটির প্রথম উদাহরণটি সন্ধান করুন className

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }

Comments

নাঃ। আমি সমস্ত বংশধরদের চাই না , ঠিক যেমন প্রশ্ন করা হয়েছে তেমন শিশু child

— পল ড্রপার

প্রসব। আপনার মন্তব্য প্রয়োজনীয় ছিল। খুশি আমি 13 জনকে সহায়তা করেছি যারা (আমার মতো) প্রায়শই অনুরূপ-তবে-সম্ভবত-আরও জটিল-সাধারণ-সাধারণ সমস্যা সমাধানের জন্য অনুরূপ উত্তরগুলির সন্ধান করে।

— অগি গার্ডনার

tnx, আমি মনে করি এই উত্তরটি আরও ব্যবহারের মামলাগুলির জন্য উপযুক্ত

— বোবান স্টোজানভস্কি

রেকর্ডের জন্য, আমি উভয় ব্যবহারের কেস পেয়েছি, বংশধররা আরও কিছুটা প্রায়ই, তবে আমি শিশু ব্যবহারের ক্ষেত্রে এখানে এসেছি।

— সুম 1

Answer 4

এলিমেন্ট.কোয়ারী নির্বাচনকারী () ব্যবহার করুন। ধরে নেওয়া যাক: 'মাই এলিমেন্ট' হ'ল আপনার ইতিমধ্যে পিতাম উপাদান। 'সোনক্লাসনাম' আপনি যে সন্তানের সন্ধান করছেন সে শ্রেণি।

let child = myElement.querySelector('.sonClassName');

আরও তথ্যের জন্য, এখানে যান: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Comments

কোনও কারণে আমাকে let child = myElement.querySelector('sonClassName');আমার ক্ষেত্রে ব্যবহার করতে হয়েছিল

— ম্যালাত

তবে আপনাকে ক্লাসের নাম ক্যোয়ারী নির্বাচনকারীর ('। પુત્રক্লাসনাম') এর পরে বিন্দুটি যুক্ত করতে হবে, অন্যথায় এটি এটিকে হ্যান্ডেল করবে পুত্রক্লাসনাম একটি ট্যাগের নাম যা কোনও শ্রেণীর নাম নয়

— হামজা দহমৌন

Answer 5

আপনি চেষ্টা করতে পারেন:

notes = doc.querySelectorAll('.4');

অথবা

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

Comments

আমি ভাবছিলাম যে শেষ পর্যন্ত ব্রাউজারগুলিতে jQuery এর মতো কোনও কিছুর প্রয়োজন ছাড়াই এই কার্যকারিতাটি ছিল কিনা তা দেখে খুশি। যদি কেউ কৌতূহলী হন তবে দেখে মনে হয় এটি বেশিরভাগ আধুনিক ব্রাউজারগুলিতে সমর্থিত: বিকাশকারী.মোজিলা.আর

— মার্কিন- ডকস / ওয়েবে / এপিআই / ডকুমেন্ট /…

Answer 6

আমার কাছে মনে হচ্ছে আপনি চতুর্থ স্প্যান চান। যদি তা হয় তবে আপনি কেবল এটি করতে পারেন:

document.getElementById("test").childNodes[3]

অথবা

document.getElementById("test").getElementsByTagName("span")[3]

এটি সর্বশেষে নিশ্চিত করে যে এমন কোনও গোপন নোড নেই যা এটিকে বিঘ্নিত করতে পারে।

Comments

ধন্যবাদ, তবে শিশু উপাদানগুলির একটি পরিবর্তনশীল পরিমাণ রয়েছে।

— spyderman4g63

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

— খ্রিস্টান জারজেনসেন

TagNameএটাই! খুবই সোজা.

— জ্যাকসনকর

প্রথম উপাদানটি যেমন ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ("পরীক্ষা") পেতে আমি এই কৌশলটি ঘন ঘন ব্যবহার করি child চাইল্ডনোডস [0]

— লুইস এগলটন

@ লুইসএগলটন আছে .firstChildএবং .firstChildElementযদিও

— ইয়াকোভল

Answer 7

তবে সচেতন থাকুন যে পুরানো ব্রাউজারগুলি সমর্থন করে না getElementsByClassName।

তারপরে, আপনি করতে পারেন

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

দেখে মনে হচ্ছে এটি কাজ করে তবে সচেতন হতে হবে যে একটি এইচটিএমএল ক্লাস

• একটি চিঠি দিয়ে শুরু করতে হবে: এজেড বা এজেড
• অক্ষর (A-Za-z), অঙ্কগুলি (0-9), হাইফেনস ("-") এবং আন্ডারস্কোর ("_") দ্বারা অনুসরণ করা যেতে পারে

Answer 8

এর সাথে আইডিটির নাম ব্যবহার করুন getElementById, এর #আগে কোনও চিহ্ন নেই । তারপরে আপনি spanবাচ্চাদের নোডগুলি ব্যবহার করে পেতে পারেন getElementsByTagNameএবং সঠিক ক্লাসের সাথে একটিটি সন্ধান করতে তাদের মাধ্যমে লুপ পেতে পারেন :

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

ডেমো: http://jsfiddle.net/Guffa/xB62U/

Comments

দুঃখিত, এটি # টাইপো ছিল। আমি ধারক ডিভটি নির্বাচন করতে পারি, তবে ট্যাগের নামে শিশু উপাদানগুলি নির্বাচন করতে পারি না কারণ সেই ফাংশনটি আই 8 তে কাজ করছে না।

— spyderman4g63

@ স্পাইডারম্যান ৪ জি :৩: getElementsByTagNameপদ্ধতিটি আইই ৮ তে কাজ করে It এটি আই আই ৫.৫ হিসাবে সমর্থিত। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

Answer 9

আমার মতে, যতবার আপনি পারেন, আপনার অ্যারে এবং এর পদ্ধতিগুলি ব্যবহার করা উচিত। এগুলি অনেক বেশি, তারপরে পুরো ডিওএম / মোড়কের উপরে লুপিং করে বা স্টাফটি খালি অ্যারেতে ঠেলে দেয়। এখানে উপস্থাপিত বেশিরভাগ সমাধান আপনি নায়েভকে এখানে বর্ণিত হিসাবে কল করতে পারেন (দুর্দান্ত নিবন্ধ বিটিডাব্লু):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

আমার সমাধান : (কোডেপেনের লাইভ পূর্বরূপ: https://codepen.io/Nikolaus91/pen/wEGEYe )

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

Answer 10

Jquery ব্যবহার করে আমি যেভাবে এটি করব তা হ'ল এটি ..

var টার্গেটচাইল্ড = $ ("# পরীক্ষা") children বাচ্চাদের ()। সন্ধান ("span.four");

Comments

প্রশ্ন জাভাস্ক্রিপ্ট সম্পর্কে jQuery নয়

— জয়া

Answer 11

এখানে একটি অপেক্ষাকৃত সহজ পুনরাবৃত্ত সমাধান। আমি মনে করি এখানে প্রস্থের প্রথম সন্ধানটি উপযুক্ত। এটি শ্রেণীর সাথে মেলে এমন প্রথম উপাদানটি ফিরিয়ে দেবে।

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

Answer 12

আপনি নীচের লাইনটি যুক্ত করে প্যারেন্ট ক্লাসটি পেতে পারেন। আপনি একটি আইডি ছিল, এটা দিয়ে সহজ হবে getElementById। তা সত্ত্বেও,

var parentNode = document.getElementsByClassName("progress__container")[0];

তারপরে আপনি ক্লাসের সাথে সমস্ত মিলে যাওয়া আনতে querySelectorAllপিতামাতাকে ব্যবহার করতে পারেন<div>div.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAlldivক্লাসের সাথে প্রতিটি আনতে হবেprogress__marker

Answer 13

আধুনিক সমাধান

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

ডকুমেন্টেশন

Answer 14

জুন 2018 ইএস 6 এ আপডেট

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

Answer 15

YUI2 এর ক্রস ব্রাউজার বাস্তবায়ন রয়েছেgetElementsByClassName ।

Comments

হুম। উদাহরণটি আইই 8 তে কাজ করে, তবে আপনি এটি কোনও বস্তুতে প্রয়োগ করেছেন এমন ক্ষেত্রে এটি কাজ করে না। আমার ক্ষেত্রে ডকিকে একটি ইউই ডম অবজেক্ট হিসাবে সেট করা হয় এবং তারপরে ডক.গেট এলিমেন্টসবাইক্লাসনাম ব্যবহার করুন। এটি ব্যর্থ হয় যখন। সম্পাদনা: বা সম্ভবত আমি বুঝতে পারি না কীভাবে সেই বস্তুটি কাজ করে এবং এটি কেবল একটি সাধারণ ডোম অবজেক্ট?

— spyderman4g63

@ spyderman4g63 এর YUI সংস্করণ getElementsByClassNameহ'ল একটি পদ্ধতি YAHOO.util.Dom। আপনার ক্ষেত্রে, কলটি এমন কিছু দেখাচ্ছে YAHOO.util.Dom.getElementsByClassName('four', 'span', 'test')। সেই কলটি কী করছে তার আরও বিস্তারিত বোঝার জন্য আপনার সম্ভবত ডক্সটি পড়া উচিত। সংক্ষিপ্ত সংস্করণটি হ'ল এটি এখন ডিওএম উপাদানটির নীচে spanশ্রেণীর fourসাথে উপাদান testহিসাবে সন্ধান করবে id।

— হ্যাঙ্ক গে

@ spyderman4g63 হ্যাঁ, কলটির ফলাফলটি getকেবল একটি ডম উপাদান। YUI পুরো বিক্রয়কে 'ফ্রেমওয়ার্ক-নির্দিষ্ট অবজেক্টের মধ্যে সমস্ত কিছু মোড়ানো' পদ্ধতিতে গ্রহণ করে না যা jQuery এর মতো কিছু করে না, বা এটি প্রোটোটাইপের মতো বানর-প্যাচ দেশীয় বস্তুগুলিতেও করেন না (করেন? আমি ডাব্লু / প্রোটোপকে ভুল করিনি) সর্বদা মধ্যে)। এই ক্ষেত্রে, YUI আরও ডোজোর মতো।

— হ্যাঙ্ক গে

Answer 16

YUI নির্বাচকদের ব্যবহার করে আমি এটি কীভাবে করেছি তা এখানে। হ্যাঙ্ক গে এর পরামর্শের জন্য ধন্যবাদ।

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

যেখানে চারটি = শ্রেণীর নাম, স্প্যান = উপাদান টাইপ / ট্যাগের নাম এবং পরীক্ষার = পিতামাতার আইডি।

Answer 17

এখানYAHOO.util.Dom.getElementsByClassName() থেকে ব্যবহার করুন ।