Check if an HTML object is inside another HTML object

Question

I have an example like this:

<div id="President">
  <div id="Congressman">
    <div id="Senator">
      <div id="Major"></div>
    </div>
  </div>
</div>

Is there an easy way in Javascript or jQuery that we can check if the div 'Major' is a child element of all other divs? Thank you.

So you have to check if it is a child of them ALL?

BenM
– BenM

2017-02-13 20:36:17 +00:00
Commented Feb 13, 2017 at 20:36 — BenM
– BenM, Commented Feb 13, 2017 at 20:36
I think in this case we can have a loop.

Lan Mai
– Lan Mai

2017-02-13 20:37:00 +00:00
Commented Feb 13, 2017 at 20:37 — Lan Mai
– Lan Mai, Commented Feb 13, 2017 at 20:37

Asons · Accepted Answer · 2017-02-13 20:57:25Z

3

Use javascript node.contains(other node)

var qS = function(v) { return document.querySelector(v); };

console.log(qS('#President').contains(qS('#Major')))

<div id="President">
  <div id="Congressman">
    <div id="Senator">
      <div id="Major"></div>
    </div>
  </div>
</div>

Updated based on comment, combining jQuery and plain javascript

console.log( $('#President')[0].contains( $('#Major')[0] ) )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="President">
  <div id="Congressman">
    <div id="Senator">
      <div id="Major"></div>
    </div>
  </div>
</div>

edited Feb 13, 2017 at 20:57

answered Feb 13, 2017 at 20:36

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lan Mai Over a year ago

I will try this right now. Thank you for your answer :)

Asons Over a year ago

@LanMai Added a sample how to

Lan Mai Over a year ago

Thank you very much! Your answer worked! Just a small question: If I use var outer = $('#President') it won't work. Can I use $() in this case?

Asons Over a year ago

@LanMai Not like that, as you will mix jQuery with plain javascript ... will add a sample how to

Asons Over a year ago

@LanMai Updated, added a 2:nd sample

Christian Gollhardt · Accepted Answer · 2017-02-13 20:47:21Z

2

Use has():

console.log($('#President').has('#Major').length > 0)

<script src="https://code.jquery.com/jquery-3.1.1.min.js" 
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous">
</script>
<div id="President">
  <div id="Congressman">
    <div id="Senator">
      <div id="Major"></div>
    </div>
  </div>
</div>

edited Feb 13, 2017 at 20:47

answered Feb 13, 2017 at 20:37

Christian Gollhardt

17.1k17 gold badges83 silver badges119 bronze badges

3 Comments

Lan Mai Over a year ago

I will try this right now. Thank you for your answer :)

vp_arth Over a year ago

You mean $('#President').has('#Major')

Christian Gollhardt Over a year ago

Thanks for informing. My mistake @blex

artemisian · Accepted Answer · 2017-02-13 20:48:59Z

2

Is children of all other divs (using jquery):

$('#Major').parents('#Senator,#Congressman,#President').length === 3

edited Feb 13, 2017 at 20:48

answered Feb 13, 2017 at 20:41

artemisian

3,1162 gold badges24 silver badges25 bronze badges

1 Comment

blex Over a year ago

This is the simplest and shortest answer that checks that all divs are parents of #Major.

Nicolas · Accepted Answer · 2017-02-13 20:41:34Z

0

This is not the best way to do it but it's a simple one and it works

$('#President').find('#Major').length !== 0

edited Feb 13, 2017 at 20:41

answered Feb 13, 2017 at 20:36

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

Collectives™ on Stack Overflow

Check if an HTML object is inside another HTML object

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related