关于javascript：jquery有”exists”函数吗？


Is there an “exists” function for jQuery?

如何检查jquery中元素的存在？

我现在的代码是：

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

有没有更优雅的方式来处理这个问题？可能是插件还是函数？

相关讨论

在javascript中，一切都是"真实的"或"不可靠的"，对于数字0(nan)意味着false，其他一切都是true。所以你可以写：

1
if ($(selector).length)

你不需要那个>0部分。

相关讨论

对！

1
2
3
4
5
jQuery.fn.exists = function(){ return this.length > 0; }

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

这是对以下内容的回应：与Jeff Atwood一起收集代码播客

相关讨论

如果你用过

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

您可能会暗示，如果不可能，则可以使用链。

这样会更好：

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

或者，从常见问题解答：

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

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

1
if ( $('#myDiv')[0] ) { /* Do something */ }
相关讨论

您可以使用：

1
2
// if element exists
if($('selector').length){ /* do something */ }
1
2
// if element does not exist
if(!$('selector').length){ /* do something */ }
相关讨论

检查存在性的最快速、最语义的自我解释方法实际上是使用普通的JavaScript：

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

它的写入时间比jquery-length选项长一些，但执行速度更快，因为它是本机JS方法。

它比编写自己的jQuery函数更好。由于@snover指出的原因，这一替代方案的速度较慢。但这也会给其他程序员留下这样的印象：exists()函数是jquery固有的功能。其他人编辑您的代码时会/应该理解JavaScript，而不会增加知识债务。

注意，在element_id之前缺少一个""(因为这是普通的JS，而不是jQuery)。

相关讨论

您可以通过写入以下内容来保存几个字节：

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

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

相关讨论

你可以使用：

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

也许更优雅一点。

相关讨论

这个插件可以在if语句中使用，如if ($(ele).exist()) { /* DO WORK */ }或使用回调。

插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
;;(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);

杰西德

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

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

实例使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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    */
    }
})
相关讨论

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

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

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

1
2
3
4
5
6
7
8
$(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

实际上没有必要使用jquery。使用纯JavaScript，检查以下内容更容易，语义也更正确：

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

如果出于任何原因您不想为元素添加一个ID，那么您仍然可以使用任何其他设计用于访问DOM的javascript方法。

jquery确实很酷，但不要让纯javascript被遗忘…

相关讨论

你可以用这个：

1
2
3
4
5
jQuery.fn.extend({
    exists: function() { return this.length }
});

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

以前所有的答案都需要.length参数，原因是它们大多使用jquery的$()选择器，后者在窗帘后面有queryselectorall(或直接使用它)。此方法相当慢，因为它需要解析整个DOM树，查找与该选择器的所有匹配项，并用它们填充数组。

不需要或不需要[‘length’]参数，如果直接使用document.querySelector(selector)，代码将更快，因为它返回匹配的第一个元素，如果找不到则返回空。

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

但是，这个方法留给我们实际返回的对象；如果不将其保存为变量并重复使用(这样，如果我们忘记了，就可以保留引用)。

1
2
3
4
5
6
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循环中使用：

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

如果您实际上不需要元素，并且只想获取/存储一个真/假，就加倍吧！！它适用于松开的鞋子，所以为什么要在这里打结？

1
2
3
4
5
6
7
8
9
10
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);

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

1
2
3
4
5
6
7
var $target = $({});        
console.log($target, $target.length);

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

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

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

不过，我仍在寻找更好的解决方案，因为这个有点重。

编辑：警告！当selector是一个字符串时，这在ie中不起作用。

1
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
相关讨论

你想要什么？

jQuery.contains( container, contained )

The $.contains() method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply. Otherwise, it returns false. Only element nodes are supported; if the second argument is a text or comment node, $.contains() will return false.

Note: The first argument must be a DOM element, not a jQuery object or plain JavaScript object.

相关讨论

可以使用Java脚本中的长度检查元素是否存在。如果长度大于零，则元素存在；如果长度为零，则元素不存在

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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
}
相关讨论

检查元素的存在性在官方jquery网站中被清晰地记录下来！

Use the .length property of the jQuery collection returned by your
selector:

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

Note that it isn't always necessary to test whether an element exists.
The following code will show the element if it exists, and do nothing
(with no errors) if it does not:

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

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

1
2
3
4
5
jQuery.fn.exists = function(){return !!this.length};

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

1
$(selector).length && //Do something
相关讨论

测试DOM元素

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

受海威回答的启发，我想出了以下几点：

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

contains接受两个dom元素，并检查第一个元素是否包含第二个元素。

使用document.documentElement作为第一个参数满足了exists方法的语义，当我们只想应用它来检查当前文档中某个元素的存在性时。

下面，我总结了一段比较jQuery.exists()与$(sel)[0]和$(sel).length方法的代码片段，它们都返回$(4)的truthy值，而$(4).exists()返回false。在检查DOM中是否存在元素的上下文中，这似乎是所需的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$.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);
  }
1
td { border: 1px solid black }
1
2
3
4
5
6
7
8
9
10
11
12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
#idoexist
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>

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

我只是喜欢使用普通的普通JavaScript来完成这项工作。

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

无需jquery

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

我偶然发现了这个问题，我想分享一下我目前使用的代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}

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

1
2
3
4
5
$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

它可能看起来有很多代码，但是当用coffeeesccript编写时，它非常小：

1
2
3
4
5
6
$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
// 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;
};

怎么样：

1
2
3
4
5
6
7
function exists(selector) {
    return $(selector).length;
}

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

它非常小，每次都可以省去使用$()来封装选择器的麻烦。

相关讨论

我用这个：

1
2
3
4
5
6
7
8
9
10
    $.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/

$("selector"返回具有length属性的对象。如果选择器找到任何元素，它们将包含在对象中。所以如果你检查它的长度，你可以看到是否存在任何元素。在javascript中，0 == false，所以如果你没有得到0，你的代码就会运行。

1
2
3
if($("selector").length){
   //code in the case
}
相关讨论

这是jquery中我最喜欢的exist方法

1
2
3
4
5
6
7
8
9
$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

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

以及在选择器不存在时支持回调的其他版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.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);
            }
        }
    });
};

例子：

1
2
3
4
5
6
7
8
$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

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

1
2
3
4
5
if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}

下面是不同情况的完整示例，以及使用直接if on jquery选择器检查元素是否存在的方法，该选择器可能工作，也可能不工作，因为它返回数组或元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

最终解决方案

1
2
3
4
5
if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist
相关讨论

是的，最好的方法是：

由JQuery签署：

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

selector可以是ElementID或ElementClass。

或

如果您不想使用JQuery库，那么可以通过使用核心JavaScript来实现：

由JavaScript签署：

1
2
3
if(document.getElementById("ElementID")) {
    //Do something...
}
相关讨论

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

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

相关讨论

试试这个。

简单、简短，可用于整个项目：

1
jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin

用途：

1
console.log($("element-selector").exists());

_________________

或者更短：(对于不想定义jquery插件的情况)：

1
if(!!$("elem-selector")[0]) ...;

甚至

1
if($("elem-selector")[0]) ...;
相关讨论

ID和类选择器的简单实用函数。

1
2
3
4
5
6
7
8
9
10
   function exist(IdOrClassName, IsId) {
        var elementExit = false;
        if (IsId) {
            elementExit= $("#" +"" + IdOrClassName +"").length ? true : false;
        }
        else {
                elementExit = $("." +"" + IdOrClassName +"").length ? true : false;
        }
        return elementExit;
    }

像下面这样调用这个函数

1
2
3
4
5
6
7
8
9
10
11
12
    $(document).ready(function () {
            $("#btnCheck").click(function () {
//address is the id so IsId is true. if address is class then need to set IsId false
                if (exist("address", true)) {
                    alert("exist");
                }
                else {
                    alert("not exist");
                }

            });
        });
相关讨论

只需检查选择器的长度，如果它大于0，则返回true，否则返回false。

身份证：

1
2
3
4
 if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}

班级：

1
2
3
4
 if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

下拉：

1
2
3
4
if( $('#selector option').size() ) {   // use this if you are using dropdown size to check

   // it exists
}

所有的答案都不能有效地验证jquery中是否存在元素。经过多年的编码，只有这个解决方案才不会发出关于存在与否的任何警告：

1
if($(selector).get(0)) { // Do stuff }

或者在你开始工作时保释：

1
if(!$(selector).get(0)) return;

解释

在这种情况下，您不必处理零空长度问题。这将强制获取一个元素，而不是计算它们。

我用这个：

1
2
3
 if($("#element").length > 0){
     //the element exists in the page, you can do the rest....
    }

它非常简单，而且很容易找到一个元素。

相关讨论

如果输入不存在，它将没有值。试试这个…

1
if($(selector).val())

使用以下语法使用jquery检查元素是否实际存在。

1
2
3
4
5
6
7
let oElement = $(".myElementClass");
if(oElement[0]) {
    // Do some jQuery operation here using oElement
}
else {
    // Unable to fetch the object
}

使用querySelectorAll和forEach，不需要if和额外分配：

1
2
3
document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

与以下相反：

1
2
3
4
const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}