jquery if statement to check if element is within a specific parent div

Question

I have alot of elements with class of .button all over my layout. Upon a click of the element with class of button, I need to check first that the element is within the parent div of either box1 or box2.

A short example would be... if the clicked button is within the box1 div && (another condition) then do something. Would it be best to use the combination of .closet and .length to check if the button is within a certain div?

<div id="box1">
        <div id="column1">
             <div class="round_button"></div>
             <div style="background: #000">
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
             </div>
        </div>
 <div> 

<div id="box2">
        <div id="column2">
             <div class="round_button"></div>
             <div style="background: #000">
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
             </div>
        </div>
 <div>

gsamaras · Accepted Answer · 2016-11-22 18:29:00Z

8

In addition to the answer above, if there are a number of buttons, and instead of binding an event separately to each, you just want to attach once, based upon its ancestor, you can do something like this:

$(".button").click(function() {
  if ($(this).is("#box1 *")) {}
});

edited Nov 22, 2016 at 18:29

gsamaras

73.7k50 gold badges210 silver badges330 bronze badges

answered Aug 23, 2012 at 5:00

NedStarkOfWinterfell

5,35328 gold badges114 silver badges205 bronze badges

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

7 Comments

NedStarkOfWinterfell Over a year ago

@undefined, I can't find any. Where do you think is the error?

Ram Over a year ago

@Cupidvogel There is an extra (.

NedStarkOfWinterfell Over a year ago

@user1502434, When the button is clicked, you check whether this button is any one of the descendants of the element with id box1, if so, you take a certain action. This check is done by if (($(this).is("#box1 *")).

user1502434 Over a year ago

great, I think this will be my preferred approach! Very nice.

nnnnnn Over a year ago

How does this compare with if($(this).closest("#box1").length) in terms of efficiency?

|

Blender · Accepted Answer · 2012-08-23 04:59:49Z

4

If the functionality between the two groups of buttons differs significantly, I would just define event handlers on each group of buttons:

$('#box1 .button').on('click', function(event) {
  // ...
});

$('#box2 .button').on('click', function(event) {
  // ...
});

answered Aug 23, 2012 at 4:59

Blender

300k55 gold badges462 silver badges512 bronze badges

Comments

xdazz · Accepted Answer · 2012-08-23 04:57:40Z

1

You don't need the if statement if there is no else.

$('#box1, #box2').find('.button').click(function() {
  //  do something
});

answered Aug 23, 2012 at 4:57

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

kmb64 · Accepted Answer · 2012-08-23 04:58:01Z

1

use $(this).parents("#box1"); inside the click event function for the buttons

answered Aug 23, 2012 at 4:58

kmb64

1,5132 gold badges17 silver badges29 bronze badges

Comments

Danil Speransky · Accepted Answer · 2012-08-23 05:01:15Z

0

$('#box1 .button').click(function() {
  // first code
});

$('#box2 .button').click(function() {
  // second code
});

answered Aug 23, 2012 at 5:01

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Collectives™ on Stack Overflow

jquery if statement to check if element is within a specific parent div

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related