jQueryで要素の存在を確認する方法
私が持っている現在のコードはこれです：
if ($(selector).length > 0) {
// Do something
}
これに近づくためのもっとエレガントな方法はありますか？おそらくプラグインか関数か
JavaScriptでは、すべてが '真実'または '偽'であり、数字の場合0（そしてNaN）という意味false、 ほかのすべてtrue。だからあなたは書くことができます：
if ($(selector).length)
あなたはそれを必要としません>0部。
はい！
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
これは以下に対応しています：Jeff AtwoodによるHerding Codeのポッドキャスト
$.fn.existsたとえば、プロパティ検索（安い！）を2つの関数呼び出し（これははるかに高価です）に置き換えることです。これらの関数呼び出しの1つは、すでに持っているjQueryオブジェクトを再作成します。 - C Snover.existsきれいに読みます.lengthたとえ意味論が同一の結果と一致したとしても、意味的に異なる何かとして読む。 - Ben Zotto
あなたが使用した場合
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 */ }
$(".missing").css("color", "red")すでに正しいことをしている…（つまり何もしない） - Ben Blank$.fn新しいjQueryオブジェクト以外の何かを返すため、チェインしないメソッド。 - Alnitak
これを使うことができます：
// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
存在を確認するための最速かつ最も意味的に自己説明的な方法は、実際には単純なJavaScriptを使用することです。
if (document.getElementById('element_id')) {
// Do something
}
jQueryの長さの代替方法よりも書くのに少し時間がかかりますが、ネイティブのJSメソッドであるため実行は速くなります。
そしてそれはあなた自身のjQuery関数を書く代わりの方法よりも優れています。 @snoverが述べた理由により、その代替方法は遅くなります。しかし、それは、exists（）関数がjQueryに固有のものであるという印象を他のプログラマーにも与えるでしょう。知識の借金を増やすことなく、JavaScriptを他の人がコードを編集することで理解できるはずです。
NB：element_idの前に '#'がないことに注意してください（これはプレーンなJSでありjQueryではないため）。
$('#foo a.special')。そしてそれは複数の要素を返すことができます。getElementByIdそれに近づき始めることはできません。 - kikitoif(document.querySelector("#foo a.special"))うまくいくでしょう。 jQueryは必要ありません。 - Blue Skies
次のように書くと数バイト節約できます。
if ($(selector)[0]) { ... }
これは、各jQueryオブジェクトも配列として見せかけているのでうまくいきます。したがって、配列の間接参照演算子を使用して最初の項目を取得できます。アレイ。戻るundefined指定されたインデックスにアイテムがない場合
jQuery.first()またはjQuery.eq(0)どちらもオブジェクトを返すので、オブジェクトは空っぽくても真実です。この例では、これらの関数をそのままでは使用できない理由を説明する必要があります。if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists") - Salman A.eq(0)長さ1または0に切り捨てられた別のjQueryオブジェクトのみを返します。.first()の便利な方法です.eq(0)。しかし.get(0)最初のDOM要素を返すundefinedと同じです[0]。 jQueryオブジェクトの最初のDOM要素は、通常のobjectプロパティに次の名前で格納されています。'0'。これは単純なプロパティアクセスです。唯一の型キャストは、暗黙的に数値を変換することによって得られます。0文字列に'0'。型キャストが問題になるのであれば、あなたが使用することができます$.find(selector)['0']代わりに。 - Robert
あなたが使用することができます：
if ($(selector).is('*')) {
// Do something
}
Aちょっともっとエレガントかも
666他にもたくさんの理由でコードが壊れているのでしょう。これは無効なセレクタですが、$（666）.length有効なJavaScriptです。：それは真実に評価されます、そしてそれ故にすべき条件を満たす - Todd$.find(666).length動作します。 - Emile Bergeron
このプラグインは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);
1つか2つのコールバックを指定できます。最初の要素は要素が存在すれば起動し、2番目の要素は要素が存在すれば起動します。ではない存在します。ただし、関数を1つだけ渡すことを選択した場合は、要素が存在するときにのみ機能します。したがって、選択した要素が消滅するとチェーンは消滅しますではない存在します。もちろん、もしそれが存在すれば、最初の関数が起動しチェーンは継続します。
を使用することに留意してくださいコールバックバリアントは連鎖性を維持するのに役立ちます - 要素が返され、他の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 */
}
})
Has Itemsコールバックは実際に引数としてオブジェクトを渡しますか？ - Chris Marisic
本当にjQueryは必要ありません。単純なJavaScriptでは、以下をチェックするのが簡単で意味的に正しいです。
if(document.getElementById("myElement")) {
//Do something...
}
何らかの理由で要素にIDを付けたくない場合でも、DOMにアクセスするように設計された他のJavaScriptメソッドを使用できます。
jQueryは本当にクールですが、純粋なJavaScriptを忘れることはできません。
私はここにほとんどの答えがあるのを見ます正確ではない要素の長さをチェックするため、要素の長さをチェックします。多くの場合は問題ありませんが、100％ではありません。代わりにnumberが関数に渡されると想像します。
$.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*/}
これまでのすべての答えが必要な理由.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);
見つけた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.');
}
これは少し重いので、私はまだより良い解決策を探しています。
編集する警告！これはIEではうまくいきません。selector文字列です。
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
$()引数として空のオブジェクトを使って？ - nnnnnn{}に$()？ - cpburnz
あなたは要素が存在するかどうかを確認することができますまたはJavaスクリプトで長さを使用していません。 lengthがゼロより大きければelementが存在し、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
}
です$.contains()あなたが欲しいもの？
jQuery.contains( container, contained )の
$.contains()直接の子であるか、より深くネストされているかに関係なく、2番目の引数によって提供されるDOM要素が最初の引数によって提供されるDOM要素の子孫である場合、methodはtrueを返します。そうでなければ、falseを返します。要素ノードのみがサポートされています。 2番目の引数がテキストまたはコメントノードの場合$.contains()falseを返します。注意：最初の引数はjQueryオブジェクトやプレーンなJavaScriptオブジェクトではなくDOM要素でなければなりません。
$(selector).length && //Do something
ifどこif2バイトを犠牲にして読みやすさを向上させるでしょう。 - Emile Bergeron&&あなたのために。 - user7892745
要素の存在を確認する公式のjQuery Webサイト自体にきちんと文書化されています！
使用.lengthあなたから返されたjQueryコレクションのプロパティ セレクタ：
if ($("#myDiv").length) { $("#myDiv").show(); }要素が存在するかどうかをテストする必要はありません。 次のコードは要素が存在する場合はそれを表示し、何もしません。 そうでない場合（エラーなし）：
$("#myDiv").show();
これはすべての答えと非常によく似ていますが、なぜそれを使用しないでください。!2回演算子を使うので、ブール値を得ることができます。
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
Boolean(x)できる時々より効率的になります。 - user7892745
テストしてみてくださいDOM素子
if (!!$(selector)[0]) // do stuff
に触発されたハイウェイの答え私は以下のことを思いついた。
$.fn.exists = function() {
return $.contains( document.documentElement, this[0] );
}
jQuery.containsDOM要素を2つ取り、最初の要素に2番目の要素が含まれているかどうかを確認します。
を使うdocument.documentElement最初の引数がの意味論を満たすのでexists現在のドキュメント内の要素の存在をチェックするためだけにそれを適用したいときのメソッド。
以下に、比較するスニペットをまとめました。jQuery.exists()に対して$(sel)[0]そして$(sel).lengthどちらも返すアプローチtruthyの値$(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>
私はこれをするために普通のバニラジャバスクリプトを使うのが好きです。
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
あるオブジェクトが別のオブジェクトの中に存在するかどうかを確認したい場合があるので、最初の答えに何かを追加してセレクタの内側にあるセレクタをチェックしました。
// 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;
};
私はこの質問につまずいたし、私が現在使用しているコードの断片を共有したいと思います。
$.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
jQueryは必要ありません
if(document.querySelector('.a-class')) {
// do something
}
どうですか？
function exists(selector) {
return $(selector).length;
}
if (exists(selector)) {
// do something
}
ごくわずかなので、セレクタを次のように囲む必要がありません。$()毎回。
if($("#thing").exists(){}と読みます。また、これはjQueryのやり方ではありません。 - 1j01
私はこれを使っています：
$.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/
これが私のお気に入りですexistjQueryのメソッド
$.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
}
);
$("selector"）を持つオブジェクトを与えるlengthデータ。 selectorに定義した要素がある場合は、それらをオブジェクトから取得します。それで、あなたがすでにあなたが見つけることができるその長さをチェックするならば、どんな要素も存在しますか。 JavaScriptで0 == falseまたnull == false。届かない場合0あなたのコードが実行されます。
if($("selector").length){
//code in the case
}
if ( $('#myDiv').size() > 0 ) { //do something }
size()セレクタによって返された要素の数を数えます。
.size()戻る以外何もしない.length。廃止予定の理由があります - Ian.lengthプロパティであるため、以下の関数呼び出しよりもわずかに少ないオーバーヘッドで済みます。.size()。私の悪い - Furbeenator
あなたはそれがより大きいかどうかを確認する必要はありません0好き$(selector).length > 0、$(selector).lengthそれは要素の存在をチェックするのに十分かつ洗練された方法です。もっと特別なことをしたいのであれば、これだけのために関数を書く価値はないと思います。
if($(selector).length){
// true if length is not 0
} else {
// false if length is 0
}