提问



如何在jQuery中检查元素的存在?


我当前的代码是这样的:


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


有更优雅的方式来解决这个问题吗?也许是插件或功能?

最佳参考


在JavaScript中,一切都是真实的或虚假的,而数字0(和NaN)的意思是false,其他一切true。所以你可以写:


if ($(selector).length)


你不需要>0部分。

其它参考1


是!


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

if ($(selector).exists()) {
    // Do something
}


这是对:与杰夫阿特伍德[87]的羊群编码播客的回应:

其它参考2


如果你用过


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


你会暗示链接是可能的,但事实并非如此。


这会更好:


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


或者,从FAQ:[88]


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


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


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

其它参考3


你可以用这个:


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





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

其它参考4


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


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


写入比jQuery长度替代要长一些,但执行速度更快,因为它是本机JS方法。


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


注意:请注意在element_id之前缺少#(因为这是普通的JS,而不是jQuery)。

其它参考5


您可以通过编写来保存几个字节:


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


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

其它参考6


您可以使用:


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


或许,更优雅。

其它参考7


此插件可以在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 [89]


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


请记住,使用回调变量有助于保持可链接性 - 返回元素,您可以像使用任何其他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    */
    }
})

其它参考8


真的不需要jQuery。使用纯JavaScript,检查它更容易和语义正确:


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


如果由于任何原因你不想为元素添加id,你仍然可以使用任何其他用于访问DOM的JavaScript方法。


jQuery真的很酷,但是不要让纯粹的JavaScript被遗忘......

其它参考9


我看到这里的大多数答案都不准确,因为它们应该是,它们检查元素长度,在许多情况下可以正常,但不是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


你可以用这个:


jQuery.fn.extend({
    exists: function() { return this.length }
});

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

其它参考11


所有以前的答案都需要.length参数的原因是它们主要使用jquerys $()选择器,它在幕后有查询选择器(或者它们直接使用它)。这种方法相当慢因为它需要解析整个DOM树,寻找与该选择器匹配的所有并用它们填充数组。


[[length]]参数不是必需的或有用的,如果直接使用document.querySelector(selector)代码将会快很多,因为它返回它匹配的第一个元素,如果没有找到则返回null。


function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;


但是这个方法让我们返回实际的对象;如果它不会被保存为变量并重复使用(如果我们忘记就保持参考),这很好。


var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */


在某些情况下,这可能是期望的。它可以在for循环中使用,如下所示:


/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;


如果你真的不需要这个元素,并且只想获得/存储一个真/假,那么就不要加倍!!它适用于解开的鞋子,所以为什么要在这里打结?


function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);

其它参考12


我发现if ($(selector).length) {}不够。当selector是空对象{}时,它会默默地破坏你的应用程序。


var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object


我唯一的建议是对{}进行额外的检查。


if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}


我仍然在寻找一个更好的解决方案,因为这个有点重。


编辑:警告!selector是字符串时,这在IE中不起作用。


$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

其它参考13


是$ .contains()你想要什么?[90]



  jQuery.contains(容器,包含)

  
  如果第二个参数提供的DOM元素是第一个参数提供的DOM元素的后代,无论是直接子节点还是更深层次嵌套,$ .contains()方法都返回true。否则,它返回false。仅支持元素节点;如果第二个参数是文本或注释节点,$ .contains()将返回false。

  
   注意 :第一个参数必须是DOM元素,而不是jQuery对象或纯JavaScript对象。


其它参考14


您可以使用java脚本中的长度来检查元素是否存在。
   如果长度大于零,那么如果长度为零则存在元素
   元素不存在


// These by Id
if( $('#elementid').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

// These by Class
if( $('.elementClass').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

其它参考15


$(selector).length && //Do something

其它参考16


这与所有答案非常相似,但为什么不使用!运算符两次,这样你就可以得到一个布尔值:


jQuery.fn.exists = function(){return !!this.length};

if ($(selector).exists()) {
    // the element exists, now what?...
}

其它参考17


尝试测试DOM元素


if (!!$(selector)[0]) // do stuff

其它参考18


受到hiway回答的启发,我想出了以下内容:


$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}


jQuery.contains接受两个DOM元素并检查第一个元素是否包含第二个元素。[92]


当我们想要仅仅应用它来检查当前文档中元素的存在时,使用document.documentElement作为第一个参数来实现exists方法的语义。


下面,我汇总了一个片段,将jQuery.exists()$(sel)[0]$(sel).length方法进行比较,这两种方法都返回$(4) $(4)的值,而$(4).exists()]]返回false。在DOM中检查存在的上下文中,这似乎是期望的结果




$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }

td { border: 1px solid black }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>



在官方jQuery网站上整齐地记录检查元素是否存在![93]



  使用您返回的jQuery集合的.length属性
  选择:[94]


if ($("#myDiv").length) {
    $("#myDiv").show();
}

  
  请注意,并不总是需要测试元素是否存在。
  以下代码将显示元素是否存在,并且不执行任何操作
  (没有错误)如果不是:


$("#myDiv").show();


其它参考19


我有一个案例,我想看看一个对象是否存在于另一个内部,所以我在第一个答案中添加了一些内容来检查选择器内的选择器。


// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

其它参考20


我偶然发现了这个问题,我想分享我目前使用的代码片段:


$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}


现在我可以写这样的代码 -


$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});


它可能看起来很多代码,但是当用CoffeeScript编写它时它很小:


$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

其它参考21


我只想使用普通的香草javascript来做到这一点。


function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

其它参考22


怎么样:


function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}


这是非常小的,并且每次都需要用$()包围选择器。

其它参考23


不需要jQuery


if(document.querySelector('.a-class')) {
  // do something
}

其它参考24


我用这个:


    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 


仅当存在jQuery元素时才执行链 - http://jsfiddle.net/andres_314/vbNM3/2/[95]

其它参考25


$("selector")给出一个具有length数据的对象。如果在选择器中定义了元素,则可以从对象中获取它们。因此,如果你检查它的长度,你已经可以找到,是否存在任何元素。在javascript 0 == false中也null == false。如果你没有0你的代码将运行。


if($("selector").length){
   //code in the case
} 

其它参考26


if ( $('#myDiv').size() > 0 ) { //do something }


size()计算选择器返回的元素数

其它参考27


这是我在jQuery中最喜欢的exist方法


$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};


和其他版本,当选择器不存在时支持回调


$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};


例:


$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

其它参考28


你不必检查它是否0大于$(selector).length > 0$(selector).length这是足够的,并且是检查元素存在的优雅方式。我不认为如果你想做更多额外的事情,那值得为此写一个函数,是的。


if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}