জাভাস্ক্রিপ্টে ক্লাস বাই এলিমেন্ট পাবেন কীভাবে?

Question

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

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

উপরেরটি দুর্দান্ত কাজ করে তবে সমস্যাটি হ'ল আমি এমন একটি পৃষ্ঠায় একাধিক এইচটিএমএল উপাদান রয়েছে যা আমি এর সামগ্রীগুলি প্রতিস্থাপন করতে চাই। সুতরাং আমি আইডির পরিবর্তে ক্লাসগুলি ব্যবহার করতে পারি না। আমাকে জানানো হয়েছে যে জাভাস্ক্রিপ্ট ক্লাস ফাংশন দ্বারা কোনও ধরণের ইনবিল্ট এলিমেন্ট পাওয়া সমর্থন করে না। সুতরাং উপরের কোডটি কীভাবে এটি আইডির পরিবর্তে ক্লাসে কাজ করার জন্য সংশোধন করা যেতে পারে?

পিএস আমি এর জন্য jQuery ব্যবহার করতে চাই না।

Answer 1

এই কোডটি সমস্ত ব্রাউজারে কাজ করা উচিত।

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

এটি যেভাবে কাজ করে তা হ'ল ডকুমেন্টের সমস্ত উপাদানগুলির মধ্যে লুপিং করা এবং এর জন্য তাদের শ্রেণি তালিকা অনুসন্ধান করা matchClass। যদি কোনও মিল খুঁজে পাওয়া যায়, তবে সামগ্রীগুলি প্রতিস্থাপন করা হবে।

jsFiddle উদাহরণ, ভ্যানিলা জেএস ব্যবহার করে (অর্থাত্ কোনও কাঠামো নেই)

Comments

+1 - স্পেসগুলির সাথে ভাল ধরা, আমি সর্বদা তা করতে ভুলে যাই ... আমার উত্তরের জন্য এটি চুরি করতে যাচ্ছি;) বর্গটি জাভাস্ক্রিপ্টে একটি সংরক্ষিত শব্দ যদিও; এটি কোনও পরিবর্তনশীল নামের জন্য ব্যবহার করা উচিত নয় যদিও এটি সত্যিই কোনও ক্ষতি করে না (এখনও)।

— Dagg Nabbit

@ ফাংশনটি নিয়ে আপনার কোনও উপাদান নেই যা আপনি প্রতিস্থাপন করতে চান তার ভিতরে কোনও সামগ্রী থাকতে হবে না। আপনার সেখানে স্ট্রিং থাকতে পারে বা খালি রাখতে পারেন। ফাংশনটি ডাকা হয়ে গেলে যেভাবেই প্রতিস্থাপন পাঠ্য হঠাৎ উপস্থিত হবে।

— টেলর

অ্যান্ড্রু, @ না - classভেরিয়েবলের নাম হিসাবে ব্যবহার করা সাফারিতে কাজ করে না, সুতরাং এটির বর্তমানে একটি প্রভাব রয়েছে।

— ব্যবহারকারী 113716

এলিমেটস বিট্যাগনাম দ্বারা ফিরে আসা অ্যারেটির একটি দৈর্ঘ্যের সম্পত্তিও রয়েছে, যার জন্য ক্লাসের নাম / সূচিপত্রও পরীক্ষাটি পরে করা হয়। যদিও এই ক্ষেত্রে এটি কোনও সমস্যা নয় তবে লুপের জন্য একটি নিয়মিত আরও সঠিক হবে।

— ওল্ফগ্যাং স্টেঞ্জেল

স্পেস সহ সূচিপত্রের পরিবর্তে, সংরক্ষণ elems[i].className, বলুন var cnএবং ব্যবহার করা cn && cn.match(new RegExp("(^|\\s)" + matchClass + "(\\s|$)"))ভাল কাজ করবে কারণ এটি কোনও সাদা স্থান (স্পেস, অ-ব্রেকিং স্পেস, ট্যাব, ইত্যাদি) এর সাথে মেলে যখন প্রথম / শেষ শ্রেণীর নামগুলিও মেলাতে দেয়। উদাহরণ: jsfiddle.net/AXdtH/1636

— সুপুস্টার

Answer 2

অবশ্যই, সমস্ত আধুনিক ব্রাউজার এখন নিম্নলিখিত সহজ উপায় সমর্থন:

var elements = document.getElementsByClassName('someClass');

তবে সতর্কতা অবলম্বন করুন এটি আইই 8 বা এর আগে কাজ করে না। Http://caniuse.com/getelementsbyclass নাম দেখুন

এছাড়াও, সমস্ত ব্রাউজারগুলি NodeListযেমন ভাবার মতো খাঁটি ফিরবে না।

আপনার প্রিয় ক্রস ব্রাউজার লাইব্রেরিটি ব্যবহার করে আপনি সম্ভবত আরও ভাল।

Comments

আইই 8 এর জন্য আপনি ব্যবহার করতে পারেন querySelectorAll।

— গ্রাস ডাবল

Answer 3

document.querySelectorAll(".your_class_name_here");

এটি "আধুনিক" ব্রাউজারগুলিতে কাজ করবে যা সেই পদ্ধতিটি বাস্তবায়ন করে (আই 8 +)।

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

আপনি যদি পুরানো ব্রাউজারগুলির জন্য সমর্থন সরবরাহ করতে চান তবে আপনি সিজল (4 কেবি মিনি + জিজিপ) বা পেপি (10 কে মিনি) এর মতো স্ট্যান্ড-একা সিলেক্টর ইঞ্জিন লোড করতে পারেন এবং যদি দেশীয় ক্যোয়ারী নির্বাচনকারী পদ্ধতি না পাওয়া যায় তবে এটিতে ফিরে যেতে পারেন।

আপনি একটি নির্দিষ্ট শ্রেণীর সাথে উপাদান পেতে পারেন তাই কোনও নির্বাচক ইঞ্জিন লোড করা কি ওভারকিল? সম্ভবত। তবে, স্ক্রিপ্টগুলি এত বড় নয় এবং আপনি আপনার স্ক্রিপ্টের অন্য অনেক জায়গায় নির্বাচক ইঞ্জিনকে দরকারী দেখতে পাবেন।

Comments

@ টেলর: আমার মনে হয় এটি আইই 8 তে কাজ করে (100% নিশ্চিত নয় - এটি গুগল করতে খুব অলস)। নির্বিশেষে, আমি তৃতীয় পক্ষের নির্বাচক ইঞ্জিনগুলি ব্যবহার করে পিছনে সামঞ্জস্যতা সম্পর্কিত কিছু তথ্য যুক্ত করেছি।

— ক্রিশ্চিয়ান সানচেজ

document.querySelectorআইই 8

— জেক

Answer 4

একটি সহজ এবং একটি সহজ উপায়

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}

Answer 5

আমি অবাক হলাম নিয়মিত এক্সপ্রেশন ব্যবহার করে কোনও উত্তর নেই। এটি পরিবর্তে অ্যান্ড্রুয়ের উত্তর , এটি ব্যবহার RegExp.testকরে String.indexOf, যেহেতু এটি জেসপিউর পরীক্ষাগুলি অনুসারে একাধিক ক্রিয়াকলাপের জন্য আরও ভাল পারফরম্যান্স বলে মনে হচ্ছে ।
এটি আই 6 সমর্থন করে বলে মনে হচ্ছে ।

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

আপনি যদি একই ক্লাস (এস) এর ঘন ঘন সন্ধান করেন তবে আপনি আরও নিয়মিত এক্সপ্রেশনটি অন্য কোথাও সংরক্ষণ করে এবং স্ট্রিংয়ের পরিবর্তে সরাসরি ফাংশনে সঞ্চারিত করে এটিকে আরও উন্নত করতে পারেন।

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");

Answer 6

এটি বেশ কয়েকটি ব্রাউজারে কাজ করা উচিত ...

function getByClass (className, parent) {
  parent || (parent=document);
  var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}

আপনার এটির মতো এটি ব্যবহার করতে সক্ষম হওয়া উচিত:

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}

Answer 7

var elems = document.querySelectorAll('.one');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = 'content';
};

Comments

এটি আসলে কোনও উত্তর নয়। আপনার কোড ব্যাখ্যা করার চেষ্টা করুন । তদুপরি, এটি মূলত 5 বছর আগে পোস্ট করা এই প্রশ্নের আরও একটি উত্তরের আরও কমপ্যাক্ট সংস্করণ।

— হেলবার্ট

সমস্যাটি কী তা আমি জানি না। এই উত্তর ঠিক আছে। কোন মন্তব্য নেই ... আর কী? এটি সোনার নিয়ম নয়। এবং আপনি এখানে মন্তব্য চান? এবং এটি কি পঠনযোগ্য কোড?

— এন্টিসিজেড

Answer 8

আমি ধরে নিলাম এটি প্রাথমিকভাবে জিজ্ঞাসা করার সময় এটি কোনও বৈধ বিকল্প ছিল না, তবে আপনি এখন ব্যবহার করতে পারেন document.getElementsByClassName('');। উদাহরণ স্বরূপ:

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

আরও জন্য MDN ডকুমেন্টেশন দেখুন।

Answer 9

আমি এমন কিছু মনে করি:

function ReplaceContentInContainer(klass,content) {
var elems = document.getElementsByTagName('*');
for (i in elems){
    if(elems[i].getAttribute('class') == klass || elems[i].getAttribute('className') == klass){
        elems[i].innerHTML = content;
    }
}
}

কাজ করবে

Comments

আপনার পৃষ্ঠায় যদি কেবল কয়েকটি মুষ্টি উপাদান থাকে তবে অন্যথায় এটি ও (এন) সমাধান

— jwl

getAttribute ('শ্রেণি') আইই ব্যতীত অন্য সকলের মধ্যে কাজ করছে বলে মনে হচ্ছে, তারপরে getAttribute ('className') আইই

— তে

Answer 10

jQuery এই সহজ পরিচালনা করে।

let element = $(.myclass);
element.html("Some string");

এটি সমস্ত .myclass উপাদানগুলিকে সেই পাঠ্যে পরিবর্তন করে।

Comments

PS: প্রশ্নটি বলছে "। আমি এর জন্য jQuery ব্যবহার করতে চাই না।"

— জুলিয়ান

ঠিক আছে, আমি এটি দেখিনি।

— ড্যানিয়েল হাইফিড্ট

Answer 11

যখন কিছু উপাদানগুলির আইডির অভাব হয়, তখন আমি jQuery এর মতো ব্যবহার করি:

$(document).ready(function()
{
    $('.myclass').attr('id', 'myid');
});

এটি একটি অদ্ভুত সমাধান হতে পারে, তবে কেউ এটি দরকারী বলে মনে করছেন।

Comments

শ্রেণীর সাথে যদি একাধিক উপাদান থাকে তবে সেগুলি myclassসমস্ত আইডিটি গ্রহণ করবে myid, তবে আইডিগুলি অনন্য হওয়া উচিত! অধিকন্তু, ওপি স্পষ্টভাবে jQuery এড়ানোর জন্য বলেছে।

— ওরিওল

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

— ক্রোটেক