有一个jQuery的"existence"函数吗?

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

我目前的代码是这样的。

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

有没有更优雅的方法来处理这个问题?也许是一个插件或一个函数?

对该问题的评论 (1)
解决办法

在JavaScript中,一切都是'truthy&#39。 或'falsy',对于数字0(和NaN)意味着false,其他都是true。 所以你可以写

if ($(selector).length)

你不需要那个>0部分。

评论(22)

是的!

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

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

这是对以下内容的回应。Jeff Atwood的Herding Code播客

评论(11)

如果你使用

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

你就会暗示链式是可能的,而这是不可能的。

这样会更好。

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

或者,来自FAQ

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

你也可以使用下面的方法。如果jQuery对象数组中没有值,那么获取数组中的第一个项目将返回未定义。

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

你可以用这个。

// 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 length的替代方法写的时间要长一些,但执行起来更快,因为它是一个原生的JS方法。

而且它比写自己的jQuery函数更好。 那種選擇是比較慢,原因就如 @snover 所說。 但它也会给其他程序员一个印象,exists()函数是jQuery固有的东西。 JavaScript将/应该被其他编辑你的代码的人理解,而不会增加知识债务。

NB:注意到在element_id前没有'#' 在element_id前没有用'#'(因为这是纯JS,不是jQuery`)。

评论(11)

你可以通过写入来节省几个字节。

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

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

评论(4)

这个插件可以在 "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  0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (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](http://jsfiddle.net/SpYk3/cEUR5/)

你可以指定一个或两个回调。 第一个回调会在元素存在时启动,第二个回调会在元素不存在时启动。 但是,如果你只选择传递一个函数,那么只有当元素存在时才会触发。 因此,如果选择的元素不*存在,链子就会死亡。 当然,如果它确实存在,第一个函数将启动,链将继续。

请记住,使用回调变体有助于保持连锁性--元素被返回,你可以继续连锁命令,就像任何其他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    */
    }
})
评论(1)

你可以使用。

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

可能会更优雅一些,***一点。

评论(5)

我看到这里的大多数答案都不是准确的,他们检查元素长度,在很多情况下可以是OK的,但不是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
评论(0)

真的不需要jQuery。 使用纯正的JavaScript,检查起来更容易,语义上也更正确。

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

如果出于任何原因,你不想给元素加上一个id,你仍然可以使用任何其他的JavaScript方法来访问DOM。

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

评论(2)

你可以用这个。

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

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

前面所有的答案都需要.length参数,原因是他们大多使用jquery'的$()选择器,而这个选择器在幕后有querySelectorAll(或者他们直接使用它)。 这个方法相当慢,因为它需要解析整个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);
评论(0)

$.contains()是你想要的吗?

jQuery.contains( container, contained )

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

。 第一个参数必须是一个DOM元素,而不是jQuery对象或普通JavaScript对象。

评论(1)

我发现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.');
}

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

编辑:WARNING! 警告!**当selector是字符串时,这在IE中是行不通的。

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

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

// 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
}
评论(2)

检查元素是否存在](https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/)在jQuery官网本身就有整洁的记录!

使用你的jQuery集合返回的.length属性。 选择器。 选择人:>

如果 ($("#myDiv").length) {

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

&gt.注意,并非总是需要测试一个元素是否存在。 请注意,并不总是需要测试一个元素是否存在。

如果元素存在,下面的代码将显示该元素,而不做任何操作。

(没有错误)如果没有。

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

评论(0)

这和所有的答案都很相似,但是为什么不使用两次运算符,这样你就可以得到一个布尔值。

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

if ($(selector).exists()) {
    // the element exists, now what?...
}
评论(1)
$(selector).length && //Do something
评论(2)

尝试测试DOM元素

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

hiway'的回答的启发,我想出了以下办法。

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

jQuery.contains接收两个DOM元素,并检查第一个元素是否包含第二个元素。

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

下面,我'整理了一个片段,将jQuery.exists()$(sel)[0]$(sel).length方法进行比较,这两种方法都为$(4)返回值,而$(4).exists()返回。 在DOM中检查元素是否存在的情况下,这似乎是想要的结果

<!--开始片段。 js hide.true --> -- begin snippet: js hide: true -->

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

<!--结束片段-->

评论(0)