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

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
– Ram

2014-12-25 11:00:52 +00:00
Commented Dec 25, 2014 at 11:00 — Ram
– Ram, Commented Dec 25, 2014 at 11:00

Amit Joki · Accepted Answer · 2014-12-25 10:57:28Z

46

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, 2014 at 10:57

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

2 Comments

Mark Sizer Over a year ago

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.

Sergiy Ostrovsky Over a year ago

has doesn't work for me

Satpal · Accepted Answer · 2014-12-25 10:58:37Z

7

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

answered Dec 25, 2014 at 10:58

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

chrki · Accepted Answer · 2014-12-25 11:00:13Z

5

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

answered Dec 25, 2014 at 11:00

chrki

6,3436 gold badges39 silver badges60 bronze badges

Comments

charlietfl · Accepted Answer · 2014-12-25 11:05:18Z

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, 2014 at 11:05

answered Dec 25, 2014 at 10:58

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

charlietfl Over a year ago

There are lots of approaches, it somewhat depends on use case

user2575725 · Accepted Answer · 2014-12-25 10:58:17Z

2

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>

answered Dec 25, 2014 at 10:58

user2575725

Comments

Oleksandr T. · Accepted Answer · 2018-10-31 10:46:29Z

2

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>

edited Oct 31, 2018 at 10:46

answered Dec 25, 2014 at 10:57

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Linked

Related