jQuery是否有“存在”功能?

2020/10/25 17:23 · jquery ·  · 0评论

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

我当前的代码是这样的:

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

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

在JavaScript中,一切都是“truthy”或“falsy”,并为数字0手段false,其他的一切true所以你可以这样写:

if ($(selector).length)

您不需要那>0部分。

是!

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

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

这是针对:与杰夫·阿特伍德(Jeff Atwood)一起编写的牧群代码播客

如果你用过

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 */ }

您可以使用此:

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

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

检查存在性的最快,最语义上的自我解释方法实际上是使用plain JavaScript

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

它比jQuery长度替代方法更长一些,但是由于它是本机JS方法,因此执行速度更快。

它比编写自己的jQuery函数的替代方法更好由于@snover指出的原因,该替代方法较慢。但这也会给其他程序员一个印象,即该exists()函数是jQuery固有的。JavaScript其他人会/应该理解您的代码,而不会增加知识负担。

注意:请注意前面没有'#' element_id(因为这是普通JS,而不是jQuery)。

您可以通过写入以下内容来保存一些字节:

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

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

您可以使用:

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

一个更优雅,也许。

此插件可以在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    */
    }
})

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

您可以使用此:

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

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

确实不需要jQuery。使用普通JavaScript,检查以下内容会更容易且语义正确:

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

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

jQuery确实很酷,但不要让纯JavaScript被遗忘...

前面所有答案都需要该.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;

如果您实际上并不需要该元素,并且只想获取/存储一个true / false,则不加倍!它适用于解开的鞋子,那么为什么要在这里结呢?

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);

$.contains()你想要的吗?

jQuery.contains( container, contained )

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

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

我发现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

您可以使用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
}

在jQuery官方网站本身中整齐地记录了检查元素是否存在的信息!

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

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

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

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

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

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

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

尝试测试DOM元素

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

hiway的答案启发,想到了以下内容:

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

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

当我们只想将其document.documentElement用作exists检查当前文档中某个元素的存在时,使用作为第一个参数满足该方法的语义

下面,我已经放在一起进行比较的一个片段jQuery.exists()反对$(sel)[0]$(sel).length接近,两者均返回truthy的值$(4),而$(4).exists()回报false检查DOM中元素是否存在的情况下,这似乎是期望的结果

不需要jQuery(基本解决方案)

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

下面有更多性能选项(请注意,A级之前没有点)。

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector在jQuery中使用适当的匹配引擎,例如$()(嘶嘶声),并使用更多的计算能力,但在99%的情况下就可以了。第二个选项更明确,并告诉代码确切的操作。根据jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25的描述,它要快得多

我只是喜欢使用普通的javascript来做到这一点。

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

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

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

我有一种情况,我想查看一个对象是否存在于另一个对象中,因此我在第一个答案中添加了一些内容以检查选择器中的选择器。

// 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;
};

怎么样:

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

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

这是最小的,并且省去了$()每次都要封装选择器的麻烦

我正在使用这个:

    $.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代码将运行。

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

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

$.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
    }
);

这是不同情况的完整示例,以及在jQuery选择器上使用直接if来检查元素是否存在的方法,因为它可能返回数组或元素,因此可能会或可能不会起作用。

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

最终解决方案

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

演示版

console.log("existing id", $('#id-1').length)
console.log("non existing id", $('#id-2').length)

console.log("existing class single instance", $('.cls-1').length)
console.log("existing class multiple instance", $('.cls-2').length)
console.log("non existing class", $('.cls-3').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-1">
  <div class="cls-1 cls-2"></div>
  <div class="cls-2"></div>
</div>
if ( $('#myDiv').size() > 0 ) { //do something }

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

本文地址:http://jquery.askforanswer.com/jqueryshifouyoucunzaigongneng.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!