如何检查 jQuery 查找返回真或假？ [复制]

Posted 2023-05-07

【中文标题】如何检查 jQuery 查找返回真或假？ [复制]

【英文标题】：How to check jQuery find return true or false? [duplicate]

【发布时间】：2015-02-23 03:24:19

【问题描述】：

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函数返回真假？

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

JS Fiddle

【问题讨论】：

find 不返回布尔值。

【参考方案1】：

您不能在if 条件下只使用find。您可以使用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

【讨论】：

根据文档 (api.jquery.com/has)，'has' 方法返回 jQuery，而不是布尔值。这意味着此答案中的第一个示例将始终返回 true。使用文档页面上的示例，您需要检查返回对象的长度属性是否大于零，而不仅仅是返回了某些内容。

has 不适合我

【参考方案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】：

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

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

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

【参考方案4】：

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

【讨论】：

有很多方法，这在一定程度上取决于用例

【参考方案5】：

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

【参考方案6】：

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>