How to check jQuery find return true or false? [duplicate]

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
}

• Thanks for quick response. - Sadikhasan
• @Sadikhasan glad to have helped :) - Amit Joki
• According to the documentation (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
• has doesn't work for me - mario1ua

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')
}

• Thanks for quick response. - Sadikhasan

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

• Thanks for quick response. - Sadikhasan
• There are lots of approaches, it somewhat depends on use case - charlietfl

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");
}

• Thanks for quick response. - Sadikhasan

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>

• Thanks for quick response. - Sadikhasan