How to check jQuery find return true or false?

Question

HTML Code

<div class="parent1">
    <div class="child1">Child1</div>
    <div class="child2">Child2</div>
    <div class="child3">Child3</div>
</div>

<div class="parent2">
    <div class="child1">Child1</div>
    <div class="child2">Child2</div>
</div>

jQuery Code

alert($(".parent1").find(".child3").text());
alert($(".parent2").find(".child3").text());

My question is how to check find function return true or false?

In above code it return blank value, where parent1 class have child3 class where parent2 class do not have child3 class.

JS Fiddle

`find` doesn't return a boolean value. – Ram Dec 25 '14 at 11:00 — Ram, Dec 25 '14 at 11:00

score 45 · Accepted Answer · answered Dec 25 '14 at 10:57

45

You couldn't use just find in if condition. You could use has or check for the length property.

var elm = $('.parent1');
if(elm.has('.child3')){
   var child3 = elm.find('.child3');
}

Or simply like this

var child3 = $('.parent1').find(".child3");
if(child3.length > 0) {
  // child3 is present
}

answered Dec 25 '14 at 10:57

Amit Joki

58,320
7
77
95

6

According to the documentation (https://api.jquery.com/has/) the 'has' method returns jQuery, not a boolean. Meaning that the first example in this answer will always return true. Using the example on the documentation page, you need to check if the length property of the returned object is greater than zero and not simply that something has been returned. – Mark Sizer Feb 13 '17 at 10:55
`has` doesn't work for me – Sergiy Ostrovsky Aug 29 '17 at 14:58

score 7 · Answer 2 · answered Dec 25 '14 at 10:58

You can use .length property to check that element exists.

var elem = $(".parent2").find(".child3");
if(elem.length){
    alert(elem.text());
}else{
    alert('Element doesnt exists')
}

Alternatively, You can use .has()

var elem = $(".parent2");
if(elem.has(".child3")){
    alert(elem.find(".child3").text());
}else{
    alert('Element doesnt exists')
}

charlietfl · Answer 3 · 2014-12-25T11:05:18.710

5

Whenever you wrap a selector in $() it will always return a jQuery object that contains the array of matching elements.

Therefore you can use the length property to test if there are matches

var $collection = $(".parent2").find(".child3").length;
if ($collection.length)....

You can use other approaches also such as is()

var #collection = $(".parent2");
if($collection.children().is(".child3") /* returns tru if there are matches

edited Dec 25 '14 at 11:05

answered Dec 25 '14 at 10:58

charlietfl

170,828
13
121
150

There are lots of approaches, it somewhat depends on use case – charlietfl Dec 25 '14 at 11:16

score 5 · Answer 4 · answered Dec 25 '14 at 11:00

As the docs for find() explain, find() returns a jQuery object. It has a length propery which can be checked for a successful query.

if($(".parent1").find(".child3").length > 0) {
    alert("parent1 child3");
}
if($(".parent2").find(".child3").length > 0) {
    alert("parent2 child3");
}

Oleksandr T. · Answer 5 · 2018-10-31T10:46:29.570

console.log(Boolean($(".parent1").find(".child3").length));
console.log(Boolean($(".parent2").find(".child3").length));
    
console.log(!!$(".parent1").find(".child3").length);
console.log(!!$(".parent2").find(".child3").length);

console.log($(".parent1").find(".child3").length > 0);
console.log($(".parent2").find(".child3").length > 0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent1">
  <div class="child3"></div>
</div>

<div class="parent2"></div>

score 2 · Answer 6 · answered Dec 25 '14 at 10:58

There is no element .child3 for .parent2,

alert($(".parent2").find(".child3").text());

Try this:

alert($(".parent2").find(".child2").text());

Try this if you want only last item

alert($(".parent1").find("[class^=child]:last").text());
alert($(".parent2").find("[class^=child]:last").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent1">
  <div class="child1">Child1</div>
  <div class="child2">Child2</div>
  <div class="child3">Child3</div>
</div>

<div class="parent2">
  <div class="child1">Child1</div>
  <div class="child2">Child2</div>
</div>

How to check jQuery find return true or false?

6 Answers6