Question

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

Answer 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
}

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

Answer 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

Answer 4

正如docs for find()解释，find()返回一个jQuery对象。它有一个length属性，可以检查它是否成功查询。

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

Answer 5

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>

Answer 6

.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>

如何检查jQuery查找返回true还是false？

6 个答案: