Как проверить 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>