Как проверить jQuery find return true или false?

Код HTML

<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

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

Мой вопрос: как проверить функцию find вернуть true или false?

В приведенном выше коде он возвращает пустое значение, где parent1 класс имеет класс child3, где класс parent2 не имеет класса child3.

JS Fiddle

Ответ 1

Вы не можете использовать только find в if. Вы можете использовать has или проверить свойство length.

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

Или просто так

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

Ответ 2

Вы можете использовать свойство .length, чтобы проверить, существует ли элемент.

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

В качестве альтернативы вы можете использовать .has()

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

Ответ 3

Всякий раз, когда вы переносите селектор в $(), он всегда возвращает объект jQuery, содержащий массив соответствующих элементов.

Поэтому вы можете использовать свойство length для проверки наличия совпадений

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

Вы можете использовать другие подходы, такие как is()

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

Ответ 4

Как объясняет docs для find(), find() возвращает объект jQuery. Он имеет длину, которая может быть проверена для успешного запроса.

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

Ответ 5

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

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

Демо: http://jsbin.com/lapiwo/1/edit?html,js,output

Ответ 6

Нет элемента .child3 для .parent2,

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

Попробуйте следующее:

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

Попробуйте, если вы хотите только последний элемент

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>