如何检查 jQuery 查找返回 true 或 false

How to check jQuery find return true or false?

本文关键字：返回 查找 true false jQuery 何检查 检查      更新时间：2023-09-26

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>

j查询代码

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

我的问题是如何检查find函数返回真或假？

在上面的代码中，它返回空白值，其中parent1类child3类parent2类没有类child3类。

JS小提琴

你不能只使用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
}

可以使用.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')
}

正如find()文档所解释的那样，find()返回一个jQuery对象。它有一个长度属性，可以检查查询是否成功。

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

每当将选择器包装在$()时，它将始终返回一个包含匹配元素数组的 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

.parent2 没有元素 .child3， 

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>

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>

相关文章：