javascript jquery官网 - jQuery是否存在“存在”功能?




jquery中文 jquery是什么 (25)

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

我当前的代码是这样的:

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

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


Answers

你可以用这个:

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

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

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

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

您可以使用java脚本中的长度来检查元素是否存在。 如果length大于零,则如果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
}

如果你用过

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对象数组中没有值,那么获取数组中的第一个项将返回undefined。

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

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

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

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



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

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

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

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

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

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

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

如果由于任何原因您不想将id放入元素,您仍然可以使用任何其他用于访问DOM的JavaScript方法。

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


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

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

尝试测试DOM元素

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

你可以用这个:

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

怎么样:

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

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

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


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

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

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

function isExists(selector){
  return document.querySelectorAll(selector).length>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);

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

if ($(selector).length)

你不需要>0部分。


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

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

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

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

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

注意:注意元素之前缺少'#'(因为这是普通的JS,而不是jQuery)。


我正在使用这个:

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


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

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

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

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

下面,我整理了一个片段,将jQuery.exists()$(sel)[0]$(sel).length方法进行比较,这两种方法都返回$(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>


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

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


我看到这里的大多数答案都不准确,因为它们应该是,它们检查元素长度,在许多情况下可以正常,但不是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: '', url: 'http://www..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.exists = function(){return !!this.length};

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

这是我在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
    }
);

切换:0/1否则

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});






javascript jquery