jQuery.find(） 返回一个对象，即使 DOM 中没有匹配的子元素

jQuery.find() returns an object even when there's no matching child element in the DOM

本文关键字：元素 DOM find 返回 一个对象 即使 jQuery      更新时间：2023-09-26

我正在尝试查找一个ID为"的元素，该元素位于元素"中，因此是其子元素。

我正在使用 $.find 方法来执行搜索。

如果找到子对象，我想执行一些操作，

如果找不到子对象，我想执行不同的操作。

但是，即使我知道不存在这样的子元素，jQuery.find 方法也会报告一个我不确定的对象，通过"监视"窗口中的检查，它是什么。

以下是相关的代码片段：

function CreateResourceKeyTextBox(resourceKeyId, editMode) {
    var resourceKeyTableCell = $("#tdKeyResourceKeyId" + resourceKeyId);
    var resourceKeyNameTextBox = null;
    var alreadyExistingResourceKeyNameTextBox = resourceKeyTableCell.find('#txtResourceKeyName' + resourceKeyId);
    if (alreadyExistingResourceKeyNameTextBox != null && typeof alreadyExistingResourceKeyNameTextBox != "undefined") {
        resourceKeyTableCell.html('');
        resourceKeyNameTextBox = alreadyExistingResourceKeyNameTextBox;
        resourceKeyNameTextBox.css('display', 'block');
        resourceKeyNameTextBox.appendTo('#tdKeyResourceKeyId' + resourceKeyId);
        resourceKeyNameTextBox.css('width', '96%');
    }

jQuery 查询函数总是返回一个对象，即使没有匹配的 DOM 元素也是如此。

检查长度，如果集合中没有元素，则会0：

if (alreadyExistingResourceKeyNameTextBox.length ...

jquery的find方法返回一个jquery对象，其内部匹配的元素是css选择器的相应元素。

如果 css 选择器无法匹配任何元素，那么 jquery 的 find 方法的返回对象的内部匹配元素是一个空数组。您可以使用.get方法获取内部匹配元素，如下所示：

var elems = $.find(css_selector).get()

此方法返回 DOM 元素数组而不是 jquery 对象实例，您可以使用以下语法检查空数组

var elems = $.find(css_selector).get()
if(elems.length === 0){
    //array is empty
}else{
    //array is not empty
}

jquery 的这种行为最大限度地减少了您可能遇到的任何语法错误，否则，无论您的 css 选择器是否匹配任何 DOM 元素，jquery 都可以正常工作。这在大多数情况下是有益的，在这种情况下，您只需对匹配的元素应用一些更改，而不管是否有任何更改。如果此类元素的存在对业务逻辑至关重要，则应手动检查它。

我认为

你应该使用alreadyExistingResourceKeyNameTextBox.length != 0

如果使用jquery .find（）方法找不到对象，则始终返回一个空数组。 如果你得到的不是这个，你需要检查你的 DOM。您可以随时检查结果的长度，即 result.length> 0 ||结果长度 === 1，具体取决于您的需要

相关文章：