javascript - null判定 - jQuery是否存在“存在”功能?
js判斷存在 (20)
如何在jQuery中檢查元素的存在？
我當前的代碼是這樣的：
if ($(selector).length > 0) {
// Do something
}
有更優雅的方式來解決這個問題嗎？ 也許是插件或功能？
$("selector" ）給出一個具有length數據的對象。 如果在選擇器中定義了元素，則可以從對像中獲取它們。 所以，如果你檢查它的長度，你已經可以找到，是否存在任何元素。 在javascript 0 == false也null == false 。 如果你沒有得到0你的代碼就會運行。
if($("selector").length){
//code in the case
}
不需要jQuery
if(document.querySelector('.a-class')) {
// do something
}
你可以用這個：
// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
你可以用這個：
jQuery.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something*/}
嘗試測試DOM元素
if (!!$(selector)[0]) // do stuff
在JavaScript中，一切都是“真實的”或“虛假的”，而數字0 （和NaN）意味著false ，其他一切都是true 。 所以你可以寫：
if ($(selector).length)
你不需要>0部分。
如果你用過
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 */ }
怎麼樣：
function exists(selector) {
return $(selector).length;
}
if (exists(selector)) {
// do something
}
這是非常小的，並且每次都需要用$()封裝選擇器。
您可以使用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
}
您可以使用：
if ($(selector).is('*')) {
// Do something
}
或許更優雅一點 。
我偶然發現了這個問題，我想分享一下我目前使用的代碼片段：
$.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
我只想使用普通的香草javascript來做到這一點。
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
我正在使用這個：
$.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/
我發現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
是!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
是$.contains()你想要什麼？
jQuery.contains( container, contained )如果第二個參數提供的DOM元素是第一個參數提供的DOM元素的後代，無論是直接子
$.contains()，$.contains()方法都返回true。 否則，它返回false。 僅支持元素節點; 如果第二個參數是文本或註釋節點，$.contains()將返回false。注意 ：第一個參數必須是DOM元素，而不是jQuery對像或純JavaScript對象。
真的不需要jQuery。 使用純JavaScript，檢查以下內容更容易，語義更正確：
if(document.getElementById("myElement")) {
//Do something...
}
如果由於任何原因您不想將id放入元素，您仍然可以使用任何其他用於訪問DOM的JavaScript方法。
jQuery真的很酷，但不要讓純粹的JavaScript被遺忘......
這個插件可以在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);
您可以指定一個或兩個回調。 如果元素存在，第一個將觸發，如果元素不存在，則第二個將觸發。 但是，如果您選擇僅傳遞一個函數，則只會在元素存在時觸發。 因此，如果所選元素不存在，鏈將會死亡。 當然，如果它確實存在，第一個函數將觸發，鏈將繼續。
請記住，使用回調變量有助於保持可鏈接性 - 返回元素，您可以像使用任何其他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 */
}
})
這與所有答案非常相似，但為什麼不使用! 運算符兩次，這樣你就可以得到一個布爾值：
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
$(selector).length && //Do something
