Có một chức năng nào đó tồn tại trên mạng cho jQuery không?

Làm cách nào để kiểm tra sự tồn tại của một phần tử trong jQuery?

Mã hiện tại mà tôi có là:

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

Có cách nào thanh lịch hơn để tiếp cận điều này? Có lẽ là một plugin hoặc một chức năng?

Trong JavaScript, mọi thứ đều là 'sự thật' hoặc 'giả mạo' và đối với các số 0(và NaN) có nghĩa là false, mọi thứ khác true. Vì vậy, bạn có thể viết:

if ($(selector).length)

Bạn không cần >0phần đó .

Đúng!

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

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

Điều này là để đáp lại: podcast mã Herding với Jeff Atwood

Nếu bạn đã sử dụng

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

bạn sẽ ám chỉ rằng chuỗi là có thể khi nó không.

Điều này sẽ tốt hơn:

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

Ngoài ra, từ Câu hỏi thường gặp :

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

Bạn cũng có thể sử dụng như sau. Nếu không có giá trị nào trong mảng đối tượng jQuery thì việc nhận mục đầu tiên trong mảng sẽ trả về không xác định.

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

Bạn có thể sử dụng điều này:

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

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

Cách nhanh nhất và tự giải thích về mặt ngữ nghĩa nhất để kiểm tra sự tồn tại thực ra là sử dụng đơn giản JavaScript:

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

Nó dài hơn một chút để viết so với thay thế độ dài jQuery, nhưng thực thi nhanh hơn vì nó là một phương thức JS gốc.

Và nó là tốt hơn so với thay thế bằng văn bản jQuerychức năng của riêng bạn . Sự thay thế đó chậm hơn, vì những lý do @snover đã nêu. Nhưng nó cũng sẽ tạo cho các lập trình viên khác ấn tượng rằng exists()hàm này là thứ gì đó vốn có của jQuery. JavaScriptsẽ / nên được hiểu bởi những người khác chỉnh sửa mã của bạn, mà không tăng nợ kiến ​​thức.

Lưu ý: Lưu ý thiếu '#' trước element_id(vì đây là JS đơn giản, không phải jQuery).

Bạn có thể lưu một vài byte bằng cách viết:

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

Điều này hoạt động vì mỗi đối tượng jQuery cũng giả dạng như một mảng, vì vậy chúng ta có thể sử dụng toán tử hội nghị mảng để lấy mục đầu tiên từ mảng . Nó trả về undefinednếu không có mục nào trong chỉ mục được chỉ định.

Bạn có thể dùng:

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

Thanh lịch hơn một chút , có lẽ.

Plugin này có thể được sử dụng trong một iftuyên bố như if ($(ele).exist()) { /* DO WORK */ }hoặc sử dụng một cuộc gọi lại.

Cắm vào

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

Bạn có thể chỉ định một hoặc hai cuộc gọi lại. Cái thứ nhất sẽ bắn nếu phần tử tồn tại, cái thứ hai sẽ bắn nếu phần tử không tồn tại. Tuy nhiên, nếu bạn chọn chỉ truyền một hàm, nó sẽ chỉ kích hoạt khi phần tử tồn tại. Do đó, chuỗi sẽ chết nếu phần tử được chọn không tồn tại. Tất nhiên, nếu nó tồn tại, chức năng đầu tiên sẽ kích hoạt và chuỗi sẽ tiếp tục.

Hãy nhớ rằng việc sử dụng biến thể gọi lại giúp duy trì khả năng liên kết chuỗi - phần tử được trả về và bạn có thể tiếp tục xâu chuỗi các lệnh như với bất kỳ phương thức jQuery nào khác!

Ví dụ sử dụng

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

Tôi thấy hầu hết các câu trả lời ở đây đều không chính xác vì chúng phải như vậy, chúng kiểm tra độ dài phần tử, nó có thể ổn trong nhiều trường hợp, nhưng không phải 100% , hãy tưởng tượng nếu số chuyển sang hàm thay vào đó, vì vậy tôi thử nghiệm một hàm để kiểm tra tất cả điều kiện và trả lại câu trả lời như mong muốn:

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

Điều này sẽ kiểm tra cả chiều dài và loại, Bây giờ bạn có thể kiểm tra theo cách này:

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

Không cần jQuery thực sự. Với JavaScript đơn giản, dễ dàng hơn và chính xác về mặt ngữ nghĩa để kiểm tra:

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

Nếu vì bất kỳ lý do nào bạn không muốn đặt id cho phần tử, bạn vẫn có thể sử dụng bất kỳ phương thức JavaScript nào khác được thiết kế để truy cập DOM.

jQuery thực sự rất tuyệt, nhưng đừng để JavaScript thuần túy rơi vào quên lãng ...

Bạn có thể sử dụng điều này:

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

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

Lý do tất cả các câu trả lời trước yêu cầu .lengththam số là vì chúng chủ yếu sử dụng $()bộ chọn của jquery có truy vấnSelectorTất sau màn cửa (hoặc chúng đang sử dụng trực tiếp). Phương pháp này khá chậm vì nó cần phân tích toàn bộ cây DOM để tìm tất cả các kết quả khớp với bộ chọn đó và điền vào một mảng với chúng.

Tham số ['length'] là không cần thiết hoặc hữu ích và mã sẽ nhanh hơn rất nhiều nếu bạn trực tiếp sử dụng document.querySelector(selector)thay thế, bởi vì nó trả về phần tử đầu tiên mà nó khớp hoặc null nếu không tìm thấy.

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

Tuy nhiên phương pháp này để lại cho chúng ta đối tượng thực tế được trả về; Sẽ tốt nếu nó không được lưu dưới dạng biến và được sử dụng nhiều lần (do đó giữ tham chiếu xung quanh nếu chúng ta quên).

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

Trong một số trường hợp điều này có thể được mong muốn. Nó có thể được sử dụng trong một vòng lặp for như thế này:

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

Nếu bạn không thực sự cần yếu tố này và muốn nhận / lưu trữ chỉ là đúng / sai, thì chỉ cần tăng gấp đôi thôi !! Nó hoạt động cho những đôi giày được cởi trói, vậy tại sao lại thắt nút ở đây?

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

Là $.contains()những gì bạn muốn?

jQuery.contains( container, contained )

Các $.contains()phương thức trả về true nếu phần tử DOM được cung cấp bởi đối số thứ hai là một hậu duệ của phần tử DOM được cung cấp bởi đối số đầu tiên, cho dù đó là một đứa trẻ trực tiếp hoặc lồng nhau sâu sắc hơn. Nếu không, nó trả về false. Chỉ các nút phần tử được hỗ trợ; nếu đối số thứ hai là nút văn bản hoặc nút nhận xét, $.contains()sẽ trả về false.

Lưu ý : Đối số đầu tiên phải là một thành phần DOM, không phải là đối tượng jQuery hoặc đối tượng JavaScript đơn giản.

Tôi đã tìm thấy if ($(selector).length) {}là không đủ. Nó sẽ âm thầm phá vỡ ứng dụng của bạn khi selectorlà một đối tượng trống {}.

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

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

Đề nghị duy nhất của tôi là thực hiện một kiểm tra bổ sung cho {}.

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

Tôi vẫn đang tìm kiếm một giải pháp tốt hơn mặc dù vì đây là một giải pháp hơi nặng.

Chỉnh sửa: CẢNH BÁO! Điều này không hoạt động trong IE khi selectorlà một chuỗi.

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

Bạn có thể kiểm tra phần tử có mặt hay không sử dụng độ dài trong tập lệnh java. Nếu độ dài lớn hơn 0 thì phần tử có mặt nếu độ dài bằng 0 thì phần tử không có mặt

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

Kiểm tra sự tồn tại của một phần tử được ghi lại gọn gàng trong chính trang web jQuery chính thức!

Sử dụng thuộc tính .length của bộ sưu tập jQuery được bộ chọn của bạn trả về:

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

Lưu ý rằng không phải lúc nào cũng cần kiểm tra xem một phần tử có tồn tại hay không. Đoạn mã sau sẽ hiển thị phần tử nếu nó tồn tại và không làm gì cả (không có lỗi) nếu nó không:

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

điều này rất giống với tất cả các câu trả lời, nhưng tại sao không sử dụng !toán tử hai lần để bạn có thể nhận được boolean:

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

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

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

Hãy thử kiểm tra DOMphần tử

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

Lấy cảm hứng từ câu trả lời của hiway, tôi đã đưa ra những điều sau đây:

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

jQuery.contains lấy hai phần tử DOM và kiểm tra xem phần tử thứ nhất có chứa phần tử thứ hai không.

Sử dụng document.documentElementlàm đối số đầu tiên đáp ứng ngữ nghĩa của existsphương thức khi chúng ta chỉ muốn áp dụng nó để kiểm tra sự tồn tại của một phần tử trong tài liệu hiện tại.

Dưới đây, tôi đã đặt cùng một đoạn so sánh jQuery.exists()so với đồng $(sel)[0]và $(sel).lengthphương pháp tiếp cận mà cả hai trở lại truthygiá trị cho $(4)thời gian $(4).exists()trở lại false. Trong bối cảnh kiểm tra sự tồn tại của một phần tử trong DOM, đây dường như là kết quả mong muốn .

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

Không cần jQuery (giải pháp cơ bản)

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

Tùy chọn hiệu suất cao hơn nhiều bên dưới (thông báo thiếu dấu chấm trước một lớp).

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

querySelector sử dụng một công cụ kết hợp phù hợp như $ () (sizzle) trong jQuery và sử dụng nhiều sức mạnh tính toán hơn nhưng trong 99% trường hợp sẽ làm tốt. Tùy chọn thứ hai rõ ràng hơn và cho biết mã chính xác phải làm gì. Nó nhanh hơn nhiều theo jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

Tôi chỉ thích sử dụng javascript vanilla đơn giản để làm điều này.

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

Tôi vấp phải câu hỏi này và tôi muốn chia sẻ một đoạn mã tôi hiện đang sử dụng:

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

Và bây giờ tôi có thể viết mã như thế này -

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

Nó có vẻ rất nhiều mã, nhưng khi được viết bằng CoffeeScript thì nó khá nhỏ:

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

Tôi đã có một trường hợp mà tôi muốn xem liệu một đối tượng có tồn tại bên trong một đối tượng khác hay không, vì vậy tôi đã thêm một cái gì đó vào câu trả lời đầu tiên để kiểm tra bộ chọn bên trong bộ chọn ..

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

Làm thế nào về:

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

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

Nó rất tối thiểu và tiết kiệm cho bạn $()mỗi lần phải kèm theo bộ chọn .

Tôi đang sử dụng cái này:

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

Chỉ thực hiện chuỗi nếu một phần tử jQuery tồn tại - http://jsfiddle.net/andres_314/vbNM3/2/

Đây là existphương thức yêu thích của tôi trong jQuery

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

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

và phiên bản khác hỗ trợ gọi lại khi bộ chọn không tồn tại

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

Thí dụ:

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

$("selector") trả về một đối tượng có thuộc lengthtính. Nếu bộ chọn tìm thấy bất kỳ phần tử nào, chúng sẽ được đưa vào đối tượng. Vì vậy, nếu bạn kiểm tra độ dài của nó, bạn có thể thấy nếu có bất kỳ yếu tố nào tồn tại. Trong JavaScript 0 == false, vì vậy nếu bạn không nhận được 0mã của mình sẽ chạy.

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

Dưới đây là ví dụ đầy đủ về các tình huống và cách khác nhau để kiểm tra xem phần tử có tồn tại bằng cách sử dụng trực tiếp hay không nếu trên bộ chọn jQuery có thể hoặc không hoạt động vì nó trả về mảng hoặc phần tử.

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

GIẢI PHÁP CUỐI CÙNG

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

Bạn không cần phải kiểm tra nếu nó lớn hơn 0thích $(selector).length > 0, $(selector).lengthnó đủ và là một cách thanh lịch để kiểm tra sự tồn tại của các yếu tố. Tôi không nghĩ rằng đó là giá trị để viết một chức năng chỉ cho việc này, nếu bạn muốn làm thêm nhiều thứ, vâng.

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