একটি সুনির্দিষ্ট শ্রেণিযুক্ত নিকটতম পূর্বপুরুষ উপাদানটি সন্ধান করুন

Question

খাঁটি জাভাস্ক্রিপ্টে একটি নির্দিষ্ট বর্গের গাছের খুব কাছাকাছি থাকা কোনও উপাদানের পূর্বপুরুষকে কীভাবে খুঁজে পাব ? উদাহরণস্বরূপ, গাছের মতো:

<div class="far ancestor">
    <div class="near ancestor">
        <p>Where am I?</p>
    </div>
</div>

তারপর আমি চাই div.near.ancestorযদি আমি এই চেষ্টা pএবং অনুসন্ধান ancestor।

Comments

দয়া করে নোট করুন যে বাইরের DIV আছে একটি পিতা বা মাতা নয় এটি একটি এর পূর্বপুরুষ থেকে pউপাদান। আপনি যদি কেবলমাত্র পিতামাতার নোড পেতে চান তবে আপনি এটি করতে পারেন ele.parentNode।

— ফেলিক্স ক্লিং

@ ফেলিক্সক্লিং: এই পরিভাষাটি জানেন না; আমি এটা পরিবর্তন করব।

— rvighne

এটি আসলে আমরা যেমন ব্যবহার করি মানুষ একইভাবে :) আপনার বাবার (পিতামাতার) পিতা (পিতা বা মাতা) আপনার পিতা (পিতা বা মাতা) নন, এটি আপনার দাদা (পিতামহ) বা আরও সাধারণভাবে বলতে গেলে আপনার পূর্বপুরুষ।

— ফেলিক্স ক্লিং 20

Answer 1

আপডেট: এখন বেশিরভাগ প্রধান ব্রাউজারগুলিতে সমর্থিত

document.querySelector("p").closest(".near.ancestor")

মনে রাখবেন এটি কেবল ক্লাস নয়, নির্বাচকদের সাথে মেলে

https://developer.mozilla.org/en-US/docs/Web/API/Element.closest

---

লিগ্যাসি ব্রাউজারগুলির জন্য যা সমর্থন করে না closest()তবে matches()একটিতে @ rvighne এর শ্রেণীর মিলের মতো নির্বাচক-ম্যাচিং তৈরি করতে পারে:

function findAncestor (el, sel) {
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
    return el;
}

Comments

এখনও ইন্টারনেট এক্সপ্লোরার, এজ এবং অপেরা মিনি-র বর্তমান সংস্করণগুলিতে সমর্থিত নয়।

— ক্লেইনফ্রেন্ড

@ ক্লেইনফ্রেন্ড - এখনও আইই, এজ বা অপেরা মিনিতে সমর্থিত নয়। caniuse.com/#search=closest

— বিবর্তনবক্স

জুন 2016: দেখে মনে হচ্ছে সমস্ত ব্রাউজার এখনও ধরা পড়ে নি

— কুণাল

আরও অনেক উন্নত ডিওএম ট্রভারসাল বৈশিষ্ট্য সহ একটি ডিওএম স্তর 4 পলিফিল closestরয়েছে। আপনার কোডটিতে নতুন নতুন বৈশিষ্ট্য পেতে আপনি এই প্রয়োগটিকে নিজেই টানতে পারেন বা পুরো বান্ডিলটি অন্তর্ভুক্ত করতে পারেন।

— গার্বি

এজ 15 এর সমর্থন রয়েছে, যা সমস্ত বড় ব্রাউজারগুলিকে coverেকে রাখে। আপনি

— IE11

Answer 2

এটি কৌশলটি করে:

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

লুপটি elপ্রত্যাশিত শ্রেণি না হওয়া পর্যন্ত অপেক্ষা করে এবং এটি প্রতিটি পুনরাবৃত্তির পিতামাতার elকাছে সেট elকরে তাই শেষ পর্যন্ত, আপনার সেই শ্রেণীর সাথে পূর্বপুরুষ বা আছে null।

এখানে একটি বেহালতা আছে , যদি কেউ এটির উন্নতি করতে চান। এটি পুরানো ব্রাউজারগুলিতে (যেমন আইই) কাজ করবে না; ক্লাসলিস্টের জন্য এই সামঞ্জস্যতা টেবিলটি দেখুন । নোড একটি উপাদান কিনা তা নিশ্চিত করতে আরও কাজ জড়িত parentElementকারণ এখানে এখানে ব্যবহৃত parentNodeহয়।

Comments

এর বিকল্পের জন্য .classList, স্ট্যাকওভারফ্লো . com/q/5898656/218196 দেখুন ।

— ফেলিক্স ক্লিং

আমি কোডটি সংশোধন করেছি, তবে এমন শ্রেণীর নামের কোনও পূর্বপুরুষ না থাকলে এটি ত্রুটি ছুঁড়ে ফেলবে।

— ফেলিক্স ক্লিং

আহ, আমি ভেবেছিলাম এটির কোন অস্তিত্ব নেই, তবে আমি ভুল ছিল । যাইহোক, parentElementএকটি বরং নতুন সম্পত্তি (DOM স্তর 4) এবং parentNodeচিরকাল থেকে ... সুতরাং parentNodeএছাড়াও পুরোনো ব্রাউজারে কাজ করে, যেহেতু parentElementনাও করতে পারে। অবশ্যই আপনি পক্ষে / বিপক্ষে একই যুক্তি তৈরি করতে পারেন classList, তবে এর মতো সহজ বিকল্প নেই parentElement। আমি আসলেই কেন আশ্চর্য অবাক হয়েছি কেন parentElementএটি কোনও মান জুড়ে বলে মনে হচ্ছে না parentNode।

— ফেলিক্স ক্লিং

@ ফেলিক্সকলিং: সবেমাত্র সম্পাদিত, যখন এই ধরণের পূর্বপুরুষের উপস্থিতি নেই তখন এটি মামলার পক্ষে ঠিক কাজ করে। আমার অবশ্যই সংক্ষিপ্ত মূল সংস্করণটি বেশি পরিমাণে অর্জন করা উচিত।

— rvighne

আপনি যদি প্যারামিটার উপাদানটিতে ক্লাসের নামটি নিজেই পরীক্ষা করতে চান তবে এর পূর্বপুরুষদের অনুসন্ধানের আগে আপনি লুপের শর্তগুলির while (!el.classList.contains(cls) && (el = el.parentElement));

— ক্রমটি

Answer 3

এলিমেন্ট.কোলেস্ট () ব্যবহার করুন

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

এই উদাহরণটি ডোম দেখুন:

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

এভাবে আপনি এলিমেন্ট.ক্লসস্ট ব্যবহার করবেন:

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article

Answer 4

8484 উত্তর এবং https://developer.mozilla.org/en-US/docs/Web/API/Element/matches এর ভিত্তিতে এখানে ক্রস-প্ল্যাটফর্ম 2017 সমাধান রয়েছে:

if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
        };
}

function findAncestor(el, sel) {
    if (typeof el.closest === 'function') {
        return el.closest(sel) || null;
    }
    while (el) {
        if (el.matches(sel)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

Answer 5

@ আরভিঘন সমাধানটি ভাল কাজ করে তবে মন্তব্যগুলিতে চিহ্নিত হিসাবে ParentElementএবং ClassListউভয়েরই সামঞ্জস্যের সমস্যা রয়েছে। এটি আরও সামঞ্জস্যপূর্ণ করতে, আমি ব্যবহার করেছি:

function findAncestor (el, cls) {
    while ((el = el.parentNode) && el.className.indexOf(cls) < 0);
    return el;
}

• parentNodeসম্পত্তি পরিবর্তে parentElementসম্পত্তি
• indexOfclassNameসম্পত্তি উপর পদ্ধতি পরিবর্তে সম্পত্তি containsউপর পদ্ধতি classList।

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