জাভাস্ক্রিপ্টে কীভাবে চেক করবেন যদি একটির মধ্যে অন্য উপাদান থাকে


201

একটি ডিওএম উপাদান অন্য ডিওএম উপাদানটির শিশু কিনা তা আমি কীভাবে পরীক্ষা করতে পারি? এর জন্য কি কোনও পদ্ধতি অন্তর্নির্মিত আছে? উদাহরণস্বরূপ, এর মতো কিছু:

if (element1.hasDescendant(element2)) 

অথবা

if (element2.hasParent(element1)) 

তা না হলে কোনও ধারণা কীভাবে এটি করবেন? এটি ক্রস ব্রাউজারও হওয়া দরকার। আমার এও উল্লেখ করা উচিত যে সন্তানের পিতামাতার অনেক স্তরের নীচে নেস্ট করা যেতে পারে।


3
আপনি ব্যবহার করা উচিত stackoverflow.com/a/18234150/1868545
llange

আমি বিশ্বাস করি যে জেএস আজকাল একটি "লাইভ স্ট্যান্ডার্ড" হিসাবে স্বীকৃত উত্তরটিকে "কনটিন" পদ্ধতিটি স্বীকৃত উত্তর হিসাবে পুনরুদ্ধার করা উচিত।
ডেভিডটাবম্যান

উত্তর:


219

আপডেট: এখন এটি অর্জনের একটি দেশীয় উপায় রয়েছে। Node.contains()। মন্তব্যে এবং নীচে উত্তরের পাশাপাশি উল্লেখ করা হয়েছে।

পুরানো উত্তর:

parentNodeসম্পত্তি ব্যবহার করে কাজ করা উচিত। ক্রস ব্রাউজারের অবস্থান থেকে এটি বেশ নিরাপদ। যদি সম্পর্কটি এক স্তর গভীর হিসাবে পরিচিত হয় তবে আপনি এটি সহজভাবে পরীক্ষা করতে পারেন:

if (element2.parentNode == element1) { ... }

যদি সন্তানের অভিভাবকের অভ্যন্তরে নির্বিচারে বাসা বাঁধতে পারে তবে আপনি সম্পর্কের জন্য পরীক্ষা করতে নীচের মতো একটি ফাংশন ব্যবহার করতে পারেন:

function isDescendant(parent, child) {
     var node = child.parentNode;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

আপনার উত্তরের জন্য ধন্যবাদ, সমস্যাটি হ'ল সন্তানের পিতামাতার নীচে অনেক স্তরের নীস্ট করা যেতে পারে।
এজে।

@ এজে: আমি আমার উত্তর আপডেট করেছিলাম এমন একটি সমাধান অন্তর্ভুক্ত করার জন্য যা অভিভাবকের মধ্যে নির্বিচারে বাচ্চাকে বাসা বাঁধার জন্য কাজ করা উচিত।
আসফ

228
যদি এখন কারও কাছে এটি আসছে তবে আপনার পক্ষে নোডকন্টেনস ( বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ডম / নোডকন্টেনস ) ব্যবহার করা সম্ভব হতে পারে যা আধুনিক ব্রাউজারগুলিতে একটি স্থানীয় কাজ function
অ্যাডাম হিথ

2
@ জন কারারেল নেই Node.contains(যদিও কোনও ক্যানিজ পাতা নেই)
gcampbell

3
@ আসফ আপনি দয়া করে নতুনটি অন্তর্ভুক্ত করতে আপনার উত্তর আপডেট করতে পারবেন Node.contains? :)

355

আপনার ব্যবহার করা উচিত Node.contains, যেহেতু এটি এখন স্ট্যান্ডার্ড এবং সমস্ত ব্রাউজারে উপলব্ধ।

https://developer.mozilla.org/en-US/docs/Web/API/Node.contains


নোড.হাস্পেন্ড (পিতা-মাতা) পদ্ধতিটি অপ্রয়োজনীয় তবে নোড.প্রোটোটাইপ.হেস্প প্যারেন্ট = ফাংশন (উপাদান) হবে element রিটার্ন এলিমেন্ট.কন্টেনস (এটি);};
10-10 এ লঞ্জ করুন

6
এটি কি মোবাইল ব্রাউজারগুলিতে সমর্থিত? এমডিএন ডক্সে অ্যান্ড্রয়েড, সাফারি, আইই এবং অপেরা জন্য প্রশ্ন চিহ্ন রয়েছে।
Thetallweeks

1
@thetallweeks - আমার Android 7 এ কমপক্ষে কাজ করে।
স্পিহিনএক্সএক্সএক্স

5
আপনি কমপক্ষে একটি উদাহরণ যুক্ত করতে পারতেন
নিনো আকপ্যাক

2
এটি ভাল উত্তর তবে উদাহরণটি আসল সুন্দর হবে:var parent = document.getElementById('menu'); var allElements = document.getElementsByTagName('a'); if (parent.contains(allElements[i]) { alert('Link is inside meni'); }
ব্যারন_বারটেক

45

আমাকে কেবল 'আমার' ভাগ করে নিতে হয়েছিল।

যদিও ধারণাগতভাবে আসফের উত্তরের সমান (একই ক্রস-ব্রাউজারের সামঞ্জস্যতা এমনকি আইআই)) থেকে উপকার পাওয়া যায়, এটি অনেক ছোট এবং আকারে যখন প্রিমিয়ামে থাকে এবং / অথবা যখন এত বেশি প্রয়োজন হয় না তখন এটি কার্যকর হয়।

function childOf(/*child node*/c, /*parent node*/p){ //returns boolean
  while((c=c.parentNode)&&c!==p); 
  return !!c; 
}

.. অথবা ওয়ান-লাইনার হিসাবে ( মাত্র 64 টি অক্ষর !):

function childOf(c,p){while((c=c.parentNode)&&c!==p);return !!c}

এবং jsfiddle এখানে


ব্যবহার:
childOf(child, parent) বুলিয়ান ফেরতtrue| false

ব্যাখ্যা:
while যতক্ষণ শর্তটি মূল্যায়ন করে ততক্ষণ মূল্যায়ন করেtrue। (এবং) অপারেটর আয় এই বুলিয়ান সত্য / মিথ্যা পর বাম দিকে এবং ডান দিকে মূল্যায়নের, কিন্তু শুধুমাত্র যদি বাম দিকে সত্য ছিল ( )
&&left-hand && right-hand

(বাম দিকে &&) হল: (c=c.parentNode)
এই প্রথম ধার্য হবে parentNodeএর cথেকে cএবং তারপর অপারেটর ফলে মূল্যায়ন করবে cএকটি বুলিয়ান হিসাবে।
যেহেতু কোনও পিতামাতা না থাকলে এবং রূপান্তরিত হয় তা parentNodeফেরত দেয়nullnullfalse না থাকাকালীন যখন লুপটি সঠিকভাবে বন্ধ হয়ে যায়।

(ডান দিকে &&) হল: c!==p। তুলনা অপারেটর হল ' না ঠিক করার সমান'। তাই আপনি যদি সন্তানের পিতা বা মাতা পিতা বা মাতা (আপনার নির্দিষ্ট করা) এটিকে মূল্যায়ণ নয় , কিন্তু যদি সন্তানের পিতা বা মাতা হয় পিতা বা মাতা তারপর এটি মূল্যায়ণ । সুতরাং যদি মিথ্যা হিসাবে মূল্যায়ন করা হয়, তবে অপারেটরটি সময়-শর্ত হিসাবে ফিরে আসে এবং যখন লুপটি থামায়। (নোট করুন কিছুক্ষণ দেহের প্রয়োজন নেই এবং সমাপনী সেমিকোলন প্রয়োজন)
!==truefalse
c!==p&&false;

সুতরাং যখন লুপটি শেষ cহয় তখন হয় কোনও নোড (না null) যখন এটি পিতামাতাকে খুঁজে পায় বা এটি হয় null(যখন লুপটি কোনও মিল খুঁজে না পেয়ে শেষ পর্যন্ত চলে যায়)।

সুতরাং আমরা কেবল returnযে FACT (নোড পরিবর্তে, বুলিয়ান মান হিসাবে রূপান্তরিত) ঃ return !!c;: !( NOTঅপারেটর) একটি বুলিয়ান মান (inverts trueহয়ে falseএবং ভাইস বিপরীতভাবে)। এটির মানটি উল্টাতে পারে তার আগে (নোড বা নাল) একটি বুলিয়ানে
!cরূপান্তর করে c। সুতরাং একটি দ্বিতীয় জোড়ার !( !!c) এই মিথ্যা পরিবর্তন করে ফিরে সত্যতে (যার কারণে একটি ডবল !!প্রায়ই করতে 'বুলিয়ান রূপান্তর কিছু' ব্যবহার করা হয়)।


অতিরিক্ত:
ফাংশনের শরীর / পে লোড এত ছোট যে, যদি তার উপর নির্ভর করে (যেমন যখন এটি প্রায়ই ব্যবহার করা হয় না এবং কোডে মাত্র একবার দেখা যায়), এক পারে ফাংশন (মোড়ানো) এমনকি বাদ এবং মাত্র যখন লুপ ব্যবহার করুন:

var a=document.getElementById('child'),
    b=document.getElementById('parent'),
    c;

c=a; while((c=c.parentNode)&&c!==b); //c=!!c;

if(!!c){ //`if(c)` if `c=!!c;` was used after while-loop above
    //do stuff
}

পরিবর্তে:

var a=document.getElementById('child'),
    b=document.getElementById('parent'),
    c;

function childOf(c,p){while((c=c.parentNode)&&c!==p);return !!c}

c=childOf(a, b);    

if(c){ 
    //do stuff
}

4
@ সলোমনউকো: কঠোর সমতা তুলনা ( !==) সংক্ষেপকারীর কাছে এটি স্পষ্ট করে স্পষ্ট করে গতি উন্নত করতে পারে যে এটি টাইপ-চেকিং এবং alচ্ছিক সামঞ্জস্য তুলনার ক্ষেত্রে optionচ্ছিক অন্তর্নিহিত রূপান্তর পদক্ষেপগুলি এড়াতে পারে, এইভাবে গতি উন্নত করে (আরও সঠিকভাবে আমরা কী বর্ণনা করি তার দ্বারা ঘটতে চাই, যা প্রোগ্রামারটির পক্ষেও উপকারী। আমি যখন এটি লিখেছিলাম তখন থেকে আমি মনে করি, কেবল looseিলে তুলনা ( !=) হয় খুব ত্রুটি-প্রবণ ছিল বা কোনও পুরানো ব্রাউজারে মোটেই কাজ করেনি (আমি সন্দেহ করি এটি আইআই-এ ছিল, তবে আমি ভুলে গিয়েছি) )।
গীতারল্যাব

29

আরেকটি সমাধান যা উল্লেখ করা হয়নি:

উদাহরণ এখানে

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it's a child
}

উপাদানটি সরাসরি শিশু কিনা তা বিবেচ্য নয়, এটি যে কোনও গভীরতায় কাজ করবে।


বিকল্পভাবে, .contains()পদ্ধতিটি ব্যবহার করে :

উদাহরণ এখানে

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it's a child
}

19

কটাক্ষপাত নোড # compareDocumentPosition

function isDescendant(ancestor,descendant){
    return ancestor.compareDocumentPosition(descendant) & 
        Node.DOCUMENT_POSITION_CONTAINS;
}

function isAncestor(descendant,ancestor){
    return descendant.compareDocumentPosition(ancestor) & 
        Node.DOCUMENT_POSITION_CONTAINED_BY;
}

অন্যান্য সম্পর্কের অন্তর্ভুক্ত DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDINGএবং DOCUMENT_POSITION_FOLLOWING

আইই <= 8 এ সমর্থিত নয়।


মজাদার! এটি আমাকে ২০০৩ সালে বিকাশের একটি জেএস ফাংশনের কথা মনে করিয়ে দেয় ... কিছুদিন নিয়েছে এবং কিছু জেএস বিকাশকারীদের সহায়তা পেয়েছি ... অবিশ্বাস্য (এবং দুঃখজনক) যে আজকাল কোনও পূর্ণ ড্র্যাগ-ড্রপ বা অবজেক্ট-ফিট পুরো ব্রাউজার বাস্তবায়ন নেই there's ।
ডেভিডটাবম্যান

16

আপনি ধারণ পদ্ধতি ব্যবহার করতে পারেন

var result = parent.contains(child);

অথবা আপনি তুলনাডোকামেন্ট পজিশন () ব্যবহার করার চেষ্টা করতে পারেন

var result = nodeA.compareDocumentPosition(nodeB);

শেষটি আরও শক্তিশালী: ফলাফল হিসাবে এটি একটি বিটমাস্ক ফিরে আসে।


2

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

নীচে ফাংশনটি দেওয়া হল:

function isChildOf(childObject, containerObject) {
  var returnValue = false;
  var currentObject;

  if (typeof containerObject === 'string') {
    containerObject = document.getElementById(containerObject);
  }
  if (typeof childObject === 'string') {
    childObject = document.getElementById(childObject);
  }

  currentObject = childObject.parentNode;

  while (currentObject !== undefined) {
    if (currentObject === document.body) {
      break;
    }

    if (currentObject.id == containerObject.id) {
      returnValue = true;
      break;
    }

    // Move up the hierarchy
    currentObject = currentObject.parentNode;
  }

  return returnValue;
}

আমি অক্ষর সহ এই পৃষ্ঠায় প্রতিটি অন্যান্য পলিফিল আক্ষরিক অর্থে চেষ্টা করেছি এবং এটি কেবলমাত্র কাজ করেছে। ধন্যবাদ!
প্রোটো ইভানজিলিয়ন

1

আর একবার চেষ্টা কর:

x = document.getElementById("td35");
if (x.childElementCount > 0) {
    x = document.getElementById("LastRow");
    x.style.display = "block";
}
else {
    x = document.getElementById("LastRow");
    x.style.display = "none";
}

-2

আমি সম্প্রতি এই ফাংশনটি জুড়ে এসেছি যা করতে পারে:

Node.compareDocumentPosition ()


2
ডাউনভোটেড কারণ একই উত্তরটি কেবলমাত্র একটি বাহ্যিক লিঙ্কের চেয়ে আরও বেশি তথ্যের সাথে ইতিমধ্যে একাধিকবার উপস্থিত ছিল।
স্টিফান ফ্যাবিয়ান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.