ตรวจสอบว่าองค์ประกอบเป็นลูกของผู้ปกครองหรือไม่

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

— Cheok Yan Cheng
แหล่งที่มา

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?

— SuperUberDuper

60

.has()ดูเหมือนจะออกแบบมาเพื่อจุดประสงค์นี้ เนื่องจากส่งคืนวัตถุ jQuery คุณจึงต้องทดสอบ.lengthด้วย:

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

— Blazemonger
แหล่งที่มา

@redanimalwar ขวา; นั่นคือสิ่งที่ทำ คุณพบองค์ประกอบหลักจากนั้นตรวจสอบว่าtargetอยู่ภายในหรือไม่

— Blazemonger

22

Vanilla 1-liner สำหรับ IE8 +:

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 (คอนเทนเนอร์ที่มี)
คำอธิบาย: ตรวจสอบเพื่อดูว่าองค์ประกอบ DOM เป็นลูกหลานขององค์ประกอบ DOM อื่นหรือไม่

คุณสามารถส่งผ่านองค์ประกอบหลักและองค์ประกอบที่คุณต้องการตรวจสอบไปยังฟังก์ชันนั้นและส่งคืนหากส่วนหลังเป็นลูกหลานขององค์ประกอบแรก

— naitsirch
แหล่งที่มา

3

ให้ความสนใจเป็นพิเศษกับ$.containsการใช้องค์ประกอบ DOM ไม่ใช่อินสแตนซ์ jQuery มิฉะนั้นจะส่งคืนเท็จเสมอ

— aleclarson

รายละเอียดอื่นที่ต้องจำ: $.containsไม่ส่งคืนจริงหากอาร์กิวเมนต์ทั้งสองเป็นองค์ประกอบเดียวกัน ถ้าคุณต้องการใช้domElement.contains(domElement).

— aleclarson

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)...

— Peter Ajtai

0

นอกเหนือจากคำตอบอื่น ๆ คุณสามารถใช้วิธีการที่ไม่ค่อยมีใครรู้จักนี้เพื่อคว้าองค์ประกอบของผู้ปกครองบางคนเช่นนั้น

$('child', 'parent');

ในกรณีของคุณนั่นจะเป็น

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

สังเกตการใช้ลูกน้ำระหว่างลูกกับแม่และเครื่องหมายคำพูดแยกกัน หากพวกเขาถูกล้อมรอบด้วยเครื่องหมายคำพูดเดียวกัน

$('child, parent');

คุณจะมีวัตถุที่มีวัตถุทั้งสองโดยไม่คำนึงว่าวัตถุนั้นมีอยู่ในโครงสร้างเอกสารหรือไม่

— ฉันต้องการคำตอบ
แหล่งที่มา

นี่เป็นแฮ็กที่ยอดเยี่ยม แต่ใช้งานได้ไม่ดีกับองค์ประกอบที่ไม่มีรหัสหรือคลาส

— aln447