কোনও উপাদানটি পিতামাতার সন্তান কিনা তা পরীক্ষা করুন

115

আমার কাছে নিম্নলিখিত কোড রয়েছে।

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<div id="hello">Hello <div>Child-Of-Hello</div></div>
<br />
<div id="goodbye">Goodbye <div>Child-Of-Goodbye</div></div>

<script type="text/javascript">
<!--
function fun(evt) {
    var target = $(evt.target);    
    if ($('div#hello').parents(target).length) {
        alert('Your clicked element is having div#hello as parent');
    }
}
$(document).bind('click', fun);
-->
</script>

</html>

আমি আশা করি কেবল Child-Of-Helloক্লিক করলেই $('div#hello').parents(target).lengthফিরে আসবে> 0।

যাইহোক, আমি যখনই কোথাও ক্লিক করি তখনই এটি ঘটে।

আমার কোডে কিছু ভুল আছে?

javascript jquery

— চেওক ইয়ান চেং
সূত্র

160

আপনি যদি কেবলমাত্র পিতামাতা এবং অন্যান্য পূর্বপুরুষদের কাছে না আগ্রহী হন তবে আপনি কেবল এটি ব্যবহার করতে পারেন parent()এবং হিসাবে এটি নির্বাচককে দিতে পারেন target.parent('div#hello')।

উদাহরণ: http://jsfiddle.net/6BX9n/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parent('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

অথবা যদি কোন পূর্বপুরুষদের যে ম্যাচ, তারপর ব্যবহার দেখতে চেক করতে যদি তুমি চাও .parents()।

উদাহরণ: http://jsfiddle.net/6BX9n/1/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parents('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

— user113716
সূত্র

19

jquery ছাড়া এটি কিভাবে?

— সুপারউবারডুপার

60

.has()মনে হয় এই উদ্দেশ্যে ডিজাইন করা হয়েছে। যেহেতু এটি একটি jQuery অবজেক্ট ফেরত দেয়, আপনাকে .lengthপাশাপাশি পরীক্ষা করতে হবে :

if ($('div#hello').has(target).length) {
   alert('Target is a child of #hello');
}

— Blazemonger
সূত্র

@redanimalwar ডান; এটিই তাই করে। আপনি মূল উপাদানটি খুঁজে পান, তারপরে targetএটি ভিতরে আছে কিনা তা পরীক্ষা করুন ।

— ব্লেজমোনজার

22

আইই 8 + এর জন্য ভ্যানিলা 1-লাইনার:

parent !== child && parent.contains(child);

এখানে, এটি কীভাবে কাজ করে:

function contains(parent, child) {
  return parent !== child && parent.contains(child);
}

var parentEl = document.querySelector('#parent'),
    childEl = document.querySelector('#child')
    
if (contains(parentEl, childEl)) {
  document.querySelector('#result').innerText = 'I confirm, that child is within parent el';
}

if (!contains(childEl, parentEl)) {
  document.querySelector('#result').innerText += ' and parent is not within child';
}

<div id="parent">
  <div>
    <table>
      <tr>
        <td><span id="child"></span></td>
      </tr>
    </table>
  </div>
</div>
<div id="result"></div>

স্নিপেট প্রসারিত করুন

— আলেকসান্দ্র মাকভ
সূত্র

ধন্যবাদ, এটি বেশ আশ্চর্যজনক! পুনরাবৃত্তি দুর্দান্ত। আমি ভাবছি কীভাবে ফাংশনের আর্গুমেন্টটি (অভ্যন্তরীণ) হয়ে যায় যা ফাংশনটি পরিচালনা করে। আপনি কি আরও তথ্যের একটি লিঙ্ক থাকতে পারে?

— JohnK

20

আপনার যদি এমন কোনও উপাদান থাকে যার একটি নির্দিষ্ট নির্বাচক নেই এবং আপনি এখনও এটি অন্য উপাদানটির বংশধর কিনা তা পরীক্ষা করতে চান, আপনি jQuery.contains () ব্যবহার করতে পারেন

jQuery.contains (ধারকযুক্ত, অন্তর্ভুক্ত)
বিবরণ: একটি ডিওএম উপাদান অন্য ডিওএম উপাদানের বংশধর কিনা তা পরীক্ষা করে দেখুন।

আপনি যে ফাংশনটিতে যাচাই করতে চান সেটি মূল উপাদানটি এবং সেই উপাদানটি আপনি পাস করতে পারেন এবং যদি প্রথমটির প্রথমটির বংশধর হয় তবে এটি ফিরে আসে।

— naitsirch
সূত্র

3

অতিরিক্ত মনোযোগ দিতে $.containsDOM উপাদানে নেওয়া এবং না jQuery এর দৃষ্টান্ত, বা এটা সবসময় মিথ্যা ফিরে আসবে।

— অ্যালেকারসন

মনে রাখার জন্য আরও একটি বিশদ: $.containsদুটি তর্ক যদি একই উপাদান হয় তবে কখনই সত্য হয় না। যদি আপনি এটি চান, ব্যবহার করুন domElement.contains(domElement)।

— অ্যালেকারসন

9

পরিবর্তে .closest () ব্যবহার করে শেষ হয়েছে।

$(document).on("click", function (event) {
    if($(event.target).closest(".CustomControllerMainDiv").length == 1)
    alert('element is a child of the custom controller')
});

— লুকাস
সূত্র

3

আপনি কেবল দুটি শর্ত অদলবদল করে আপনার কোডটি কাজ করতে পারেন:

if ($(target).parents('div#hello').length) {

আপনার বাচ্চা এবং পিতামাতার ভুল উপায়ে ছিল।

— tttppp
সূত্র

2

var target = $(evt.target);সুতরাং আপনার কোডটি পড়া উচিত if (target.parents('div#hello').length) {এবং না...$(target)...

— পিটার আজতাই

0

অন্যান্য উত্তরগুলির পাশাপাশি আপনি কোনও নির্দিষ্ট পিতামাতার উপাদানগুলি ধরতে এই কম-জানা পদ্ধতিটি ব্যবহার করতে পারেন,

$('child', 'parent');

আপনার ক্ষেত্রে, এটি হবে

if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);

শিশু এবং পিতামাতার মধ্যে কমা ব্যবহার এবং তাদের পৃথক উদ্ধৃতি চিহ্নগুলি নোট করুন। তারা যদি একই উক্তি দ্বারা বেষ্টিত ছিল

$('child, parent');

আপনার নথির গাছগুলিতে সেগুলি বিদ্যমান কিনা তা নির্বিশেষে আপনার উভয় বস্তু সমন্বিত একটি বস্তু থাকতে পারে।

— আমি উত্তর চাই
সূত্র

এটি একটি দুর্দান্ত হ্যাক, তবে আইডি বা ক্লাস ছাড়াই উপাদানগুলির সাথে ভাল কাজ করে না

— aln447