CODEWITHSUNDEEP
jqueryjquery-selectors
Jeff B.
Jeff B.

Reputation: 1167

Check if element contains another one in jQuery

I found many related things on Stack Overflow but not applicable for my case.

It's all in this exemple, I need to check if an element contains another one, and if yes, append something.

$(".bt_repondre").click(function(){
    comment = $(this).parent().parent().parent();
    //I want to check if comment contains a .comment_full element, if no, append.
    comment.append('add');
});

Hope you can help me, I tried so many things...

Upvotes: 21

Views: 43607

Answers (7)

user2812532
user2812532

Reputation: 95

This is how it works for me:

$(window).click(function(e) {
    // if popup is visible
    if($('.assignment_popup:visible').length) {
        
        popup_id = $('.assignment_popup:visible').attr('id');

        // if user clicked on popup itself or on something inside popup then do nothing
        if($(e.target).hasClass('open-popup') || $(e.target).hasClass('assignment_popup')) {
            return;
        }

        // if clicked element is not inside the popup then close the popup
        if(!$('#' + popup_id).find(e.target).length) {
            $('#' + popup_id).fadeOut(500);
        }
    }
        
    //console.log(e.target);
});

Upvotes: 0

Dovlet Mamenov
Dovlet Mamenov

Reputation: 589

If you were looking let's say any tr element inside table with id of myTable you can use following code:

if($('#productsTableBody tr').length)
{
//...
}

This way we can check wheather table contains any row.

Upvotes: 3

user3586413
user3586413

Reputation:

Most of these answers are incorrect. You must pass a DOM node not a jQuery element for $.contains to work properly per https://api.jquery.com/jQuery.contains/.

For example, this is how you would determine if $('#a') contains $('#b).

HTML:

<div id="a">
  <div id="b"></div>
</div>

JavaScript:

var $a = $('#a');
var $b = $('#b');
var contains = $.contains($a.get(0), $b.get(0));
console.log('contains', contains);
// outputs `true`

Upvotes: 12

Stan
Stan

Reputation: 424

Most of these answers are great, but there's a new method called contains(container,contained) (added in 1.4) that returns a Boolean! It does basically the same thing as Blender's code snippet but is probably quicker, both to type and to execute.

Implemented in your code, it'd look like this:

$(".bt_repondre").click(function(){
    comment = $(this).parent().parent().parent();
    if(!$.contains(comment, $('.comment_full')))//same as if(!jQuery.contains(...
    {
        comment.append('add');
    }
});

Upvotes: 3

YogeshWaran
YogeshWaran

Reputation: 2281

try this

 comment.has('a.comment_full').length == 0

Upvotes: 1

Blender
Blender

Reputation: 298126

You can use .has and .length:

if (comment.has('.comment_full').length) {
    // It has that element
}

  • .find will iterate over all of the descendants, but .has will stop once a descendant that matches the selector has been found. It might run faster.

  • .length just checks to see if the length of the resulting set of elements is non-zero.

Upvotes: 45

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50563

Just use .find() and check if returns an element, like this:

$(".bt_repondre").click(function(){
    comment = $(this).parent().parent().parent();
    if (! comment.find('.comment_full').length) {
       comment.append('add');
    }
});

Upvotes: 22

Related Questions