jQuery 是否有“存在”功能？

拼搏现实的明天。 2024-03-30 11:50 56阅读 0赞

## 问： ##

如何检查 jQuery 中的元素是否存在？

我目前的代码是这样的：

if ($(selector).length > 0) {
        
        // Do something
    }

有没有更优雅的方法来解决这个问题？也许是插件或功能？

## 答1: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

在 JavaScript 中，一切都是“真”或“假”，对于数字 0 意味着 false，其他一切都是 true。所以你可以写：

if ($(selector).length)

您不需要那个 >0 部分。

`@abhirathore2006 如果您使用 id 选择器并且该元素不存在，则长度为 0 并且不会引发异常。`

`有趣的是NaN != false。`

`@James 那是因为 [].toString() === [].join(',') === "" 和 "" === ""。`

`@Robert，那是因为 NaN != a 当 a 字面上 是任何值。`

`NaN 可能是 != false，但 NaN 肯定是 falsy，这是一个稍微不同的东西`

## 答2: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

是的！

jQuery.fn.exists = function(){
         return this.length > 0; }
    
    if ($(selector).exists()) {
        
        // Do something
    }

这是为了回应：Herding Code podcast with Jeff Atwood

`我只是写： if( $(selector).length ){ ... } 没有'> 0'`

`$.fn.exists 示例用两个函数调用替换属性查找（便宜！），这要昂贵得多，其中一个函数调用重新创建了一个您已经拥有的 jQuery 对象。`

`@redsquare：代码可读性是在 jQuery 上添加此类功能的最佳理由。有一个叫做 .exists 的东西读起来很干净，而 .length 读起来是语义上不同的东西，即使语义与相同的结果一致。`

`@quixoto，对不起，但是 .length 是许多不需要包装的语言的标准。你怎么解释.length？`

`在我看来，从“大于零的列表长度”的概念到“我为存在的选择器编写的元素”的概念至少是一种逻辑间接。是的，它们在技术上是相同的，但概念抽象处于不同的层次。这导致一些人更喜欢更明确的指标，即使有一些性能成本。`

## 答3: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

如果你用过

jQuery.fn.exists = function(){
        return ($(this).length > 0);}
    if ($(selector).exists()) {
         }

你会暗示链接是可能的，而不是。

这会更好：

jQuery.exists = function(selector) {
        return ($(selector).length > 0);}
    if ($.exists(selector)) {
         }

或者，from the FAQ：

if ( $('#myDiv').length ) {
         /* Do something */ }

您还可以使用以下内容。如果 jQuery 对象数组中没有值，那么获取数组中的第一项将返回 undefined。

if ( $('#myDiv')[0] ) {
         /* Do something */ }

`已经有一些不可链接的方法，例如 attr 和 data 函数。不过，我确实明白你的观点，而且，不管怎样，我只是测试长度 > 0。`

`为什么你需要把它锁起来？ $(".missing").css("color", "red") 已经做了正确的事……（即什么都没有）`

## 答4: ##

> HuntsBot周刊–不定时分享成功产品案例，学习他们如何成功建立自己的副业–huntsbot.com

你可以使用这个：

// if element exists
    if($('selector').length){
         /* do something */ }

// if element does not exist
    if(!$('selector').length){
         /* do something */ }

`您没有看到 Tim Büthe 在您之前 2 年就已经给出了这个 answer 吗？`

`Pfft，Tim 从未展示过如何测试元素是否不存在。`

## 答5: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

检查存在的最快和语义上最自我解释的方法实际上是使用简单的 JavaScript：

if (document.getElementById('element_id')) {
        
        // Do something
    }

它比 jQuery 长度替代方法要长一些，但由于它是原生 JS 方法，所以执行速度更快。

它比编写自己的 jQuery 函数更好。出于@snover 所述的原因，该替代方案较慢。但它也会给其他程序员一种印象，即 exists() 函数是 jQuery 固有的。 JavaScript 将/应该被编辑您的代码的其他人理解，而不会增加知识债务。

注意：请注意 element\_id 之前缺少一个“\#”（因为这是纯 JS，而不是 jQuery）。

`完全不是一回事。 JQuery 选择器可用于任何 CSS 规则 - 例如 $('#foo a.special')。它可以返回多个元素。 getElementById 无法解决这个问题。`

`@Noz if(document.querySelector("#foo a.special")) 会工作。不需要 jQuery。`

`JS 引擎中关于速度的论点只在没有 jQuery 就无法运行的人的脑海中消失，因为这是他们无法取胜的论点。`

`还记得 document.getElementById 是我们仅有的美好时光吗？我总是忘记文件。并且无法弄清楚为什么它不起作用。而且我总是拼写错误并且字符大小写错误。`

## 答6: ##

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

您可以通过编写节省几个字节：

if ($(selector)[0]) {
         ... }

这是因为每个 jQuery 对象也伪装成一个数组，所以我们可以使用数组解引用运算符从 array 中获取第一项。如果指定索引处没有项目，则返回 undefined。

`不，jQuery.first() 或 jQuery.eq(0) 都返回对象，对象是真实的，即使它们是空的。此示例应说明为什么不能按原样使用这些函数：if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")`

## 答7: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

您可以使用：

if ($(selector).is('*')) {
        
      // Do something
    }

也许更优雅一点。

`对于这么简单的事情，这太过分了。见 Tim Büthe 答案`

`这是正确的答案。 'length' 方法的问题是它对任何数字都给出误报，例如： $(666).length // 返回 1，但它不是有效的选择器`

`这对于非常简单的任务来说是非常昂贵的。只需查看 jquery 实现 if .is() ，您就会看到它需要处理多少代码才能回答您这个简单的问题。此外，您想要做什么并不明显，因此它与所讨论的解决方案相同或可能不太优雅。`

## 答8: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

此插件可用于 if 语句（如 if ($(ele).exist()) \{ /\* DO WORK \*/ \}）或使用回调。

插入

;;(function($) {
        
        if (!$.exist) {
        
            $.extend({
        
                exist: function() {
        
                    var ele, cbmExist, cbmNotExist;
                    if (arguments.length) {
        
                        for (x in arguments) {
        
                            switch (typeof arguments[x]) {
        
                                case 'function':
                                    if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                    else cbmNotExist = arguments[x];
                                    break;
                                case 'object':
                                    if (arguments[x] instanceof jQuery) ele = arguments[x];
                                    else {
        
                                        var obj = arguments[x];
                                        for (y in obj) {
        
                                            if (typeof obj[y] == 'function') {
        
                                                if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                                else cbmNotExist = obj[y];
                                            }
                                            if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                            if (typeof obj[y] == 'string') ele = $(obj[y]);
                                        }
                                    }
                                    break;
                                case 'string':
                                    ele = $(arguments[x]);
                                    break;
                            }
                        }
                    }
    
                    if (typeof cbmExist == 'function') {
        
                        var exist =  ele.length > 0 ? true : false;
                        if (exist) {
        
                            return ele.each(function(i) {
         cbmExist.apply(this, [exist, ele, i]); });
                        }
                        else if (typeof cbmNotExist == 'function') {
        
                            cbmNotExist.apply(ele, [exist, ele]);
                            return ele;
                        }
                        else {
        
                            if (ele.length <= 1) return ele.length > 0 ? true : false;
                            else return ele.length;
                        }
                    }
                    else {
        
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
    
                    return false;
                }
            });
            $.fn.extend({
        
                exist: function() {
        
                    var args = [$(this)];
                    if (arguments.length) for (x in arguments) args.push(arguments[x]);
                    return $.exist.apply($, args);
                }
            });
        }
    })(jQuery);

jsFiddle

您可以指定一个或两个回调。如果元素存在，第一个将触发，如果元素不存在，则第二个将触发。但是，如果您选择只传递一个函数，它只会在元素存在时触发。因此，如果所选元素不存在，则链将终止。当然，如果它确实存在，第一个函数将触发并且链将继续。

请记住，使用回调变体有助于保持可链接性——元素被返回，您可以像使用任何其他 jQuery 方法一样继续链接命令！

示例用途

if ($.exist('#eleID')) {
            /*    DO WORK    */ }        //    param as STRING
    if ($.exist($('#eleID'))) {
         /*    DO WORK    */ }        //    param as jQuery OBJECT
    if ($('#eleID').exist()) {
          /*    DO WORK    */ }        //    enduced on jQuery OBJECT
    
    $.exist('#eleID', function() {
                    //    param is STRING && CALLBACK METHOD
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }, function() {
                    //    param is STRING && CALLBACK METHOD
        /*    DO WORK    */
        /*    This will ONLY fire if the element DOES NOT EXIST    */
    })
    
    $('#eleID').exist(function() {
                    //    enduced on jQuery OBJECT with CALLBACK METHOD
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    })
    
    $.exist({
                                //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
        element: '#eleID',
        callback: function() {
        
            /*    DO WORK    */
            /*    This will ONLY fire if the element EXIST    */
        }
    })

`在回调版本中，Has Items 回调实际上不应该将对象作为参数传递吗？`

## 答9: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

我看到这里的大多数答案都不准确，他们检查元素长度，在很多情况下都可以，但不是 100%，想象一下如果数字传递给函数，所以我原型了一个检查所有的函数条件并按原样返回答案：

$.fn.exists = $.fn.exists || function() {
         
      return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
    }

这将检查长度和类型，现在您可以这样检查：

$(1980).exists(); //return false
    $([1,2,3]).exists(); //return false
    $({
        name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
    $([{
        nodeName: 'foo'}]).exists() // returns false
    $('div').exists(); //return true
    $('.header').exists(); //return true
    $(document).exists(); //return true
    $('body').exists(); //return true

## 答10: ##

> huntsbot.com – 高效赚钱，自由工作

真的不需要 jQuery。使用纯 JavaScript，检查以下内容更容易且语义正确：

if(document.getElementById("myElement")) {
        
        //Do something...
    }

如果出于某种原因您不想为元素添加 id，您仍然可以使用任何其他旨在访问 DOM 的 JavaScript 方法。

jQuery 真的很酷，但不要让纯 JavaScript 被遗忘……

`我知道：它不会直接回答原始问题（它要求使用 jquery 函数），但在这种情况下，答案将是“否”或“不是语义正确的解决方案”。`

## 答11: ##

> huntsbot.com高效搞钱，一站式跟进超10+任务平台外包需求

你可以使用这个：

jQuery.fn.extend({
        
        exists: function() {
         return this.length }
    });
    
    if($(selector).exists()){
        /*do something*/}

原文链接：[https://www.huntsbot.com/qa/8KkX/is-there-an-exists-function-for-jquery?lang=zh\_CN&from=csdn][https_www.huntsbot.com_qa_8KkX_is-there-an-exists-function-for-jquery_lang_zh_CN_from_csdn]

> huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

[https_www.huntsbot.com_qa_8KkX_is-there-an-exists-function-for-jquery_lang_zh_CN_from_csdn]: https://www.huntsbot.com/qa/8KkX/is-there-an-exists-function-for-jquery?lang=zh_CN&from=csdn