How to check if an element exist into another element?

Question

I'd like, to jQuery, understand if an element exist into another element.

Somethings like :

if($('#container').find('.search_element'))

must return YES if .search_element is into #container, NO otherwise.

How can I do it? Tried with $.contains('#container', '.search_element') but seems that this function doesnt works...

Maybe this post can help you: http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery — Bas Slagter, Aug 24 '11 at 10:42

Chris · Answer 1 · 2011-08-24T11:25:42.973

20

A simple length check:

if($("#container").find(".search_element").length) {
    // If the length is greater than 0, it exists
} else {
    // else, false
}

edited Aug 24 '11 at 11:25

answered Aug 24 '11 at 10:44

Chris

3,729
22
30

score 15 · Accepted Answer · edited May 23 '17 at 12:32

¡¡¡UPDATE!!!

See my answer [ HERE ] for a MUCH more robust plugin!

You could easily shorten @Chris answer with:

if($("#container .search_element").length) { ...

You could also do the same with a useful plugin i made for this:

jsFiddle

(function($) {
    if (!$.exist) {
        $.extend({
            exist: function(elm) {
                if (typeof elm == null) return false;
                if (typeof elm != "object") elm = $(elm);
                return elm.length ? true : false;
            }
        });
        $.fn.extend({
            exist: function() {
                return $.exist($(this));
            }
        });
    }
})(jQuery);

USE

//  With your if statement
if($("#container .search_element").exist()) { ...

//  With ID 
$.exist("#eleID");
//  OR
$("#eleID").exist();

//  With class name
$.exist(".class-name");
//  OR
$(".class-name").exist();

//  With just tag // prolly not best idea aS there will be other tags on site
$.exist("div");
//  OR
$("div").exist();

Of course this plugin could be further extended to be much more fancy (handling multiple calls at once, creating non-existing elements based on a pram), but as it stand now, it does a very simple, very needed function ... Does this element exist? return True or False

jsFiddle

Tip (i'm thinking of doing this anyway, but not sure its how people will want to use it) you could edit the plugin to have a callback function. Then you wouldn't need the "if" statement at all. — SpYk3HH, Sep 17 '13 at 15:46

score 3 · Answer 3 · answered Aug 24 '11 at 10:45

3

You can use .is and :has, just to be complete. I would prefer a solution which tests .length though.

if($('#container').is(':has(.search_element)')) {
   // I haz that
}

answered Aug 24 '11 at 10:45

karim79

339,989
67
413
406

score 2 · Answer 4 · answered Aug 24 '11 at 10:43

2

check the length of the array

if($('#container').find('.search_element').length)

answered Aug 24 '11 at 10:43

red-X

5,108
1
25
38

score 1 · Answer 5 · edited Feb 28 '13 at 20:41

1

jQuery has a default method for this:

$("#container").has(".selector");

http://api.jquery.com/has/

edited Feb 28 '13 at 20:41

Flexo

87,323
22
191
272

answered Feb 28 '13 at 18:17

Roi

1,597
16
19

How to check if an element exist into another element?

5 Answers5

¡¡¡UPDATE!!!

jsFiddle

jsFiddle

Linked