jQueryの要素の存在を確認するにはどうすればよいですか？
私が持っている現在のコードはこれです：
if ($(selector).length > 0) {
// Do something
}
これにアプローチするためのよりエレガントな方法はありますか？おそらくプラグインまたは関数？
827449 次
46 に答える
2670
JavaScript では、すべてが「真実」または「偽」であり、数字の場合、それ以外のすべて0を意味します。したがって、次のように書くことができます。falsetrue
if ($(selector).length)
>0その部分は必要ありません。
于 2009-02-25T19:16:21.610 に答える
1404
はい！
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
これは、以下に対応しています。JeffAtwoodによるHerdingCodeポッドキャスト
于 2008-08-27T19:50:03.057 に答える
386
使用した場合
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 */ }
于 2009-01-14T19:46:05.900 に答える
143
これを使用できます：
// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }
于 2011-04-03T12:17:06.353 に答える
111
存在をチェックするための最速かつ最も意味論的に自己説明的な方法は、実際には plain を使用することですJavaScript:
if (document.getElementById('element_id')) {
// Do something
}
jQuery の長さの代替方法よりも少し長く書きますが、ネイティブの JS メソッドであるため実行は高速です。
また、独自の関数を作成するよりも優れていますjQuery。@snoverが述べた理由により、その代替手段は遅くなります。exists()しかし、それはまた、関数が jQuery 固有のものであるという印象を他のプログラマーに与えることにもなります。JavaScript知識の負債を増やすことなく、コードを編集している他の人が理解できる/理解できるはずです。
注意:の前に「#」がないことに注意してくださいelement_id(これは単純な JS であり、 ではありませんjQuery)。
于 2012-01-11T12:27:49.520 に答える
72
以下を使用できます。
if ($(selector).is('*')) {
// Do something
}
おそらく、もう少しエレガントです。
于 2008-09-17T17:53:34.673 に答える
70
このプラグインは、コールバックの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つのコールバックを指定できます。1つ目は要素が存在する場合に起動し、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 */
}
})
于 2012-11-09T17:47:58.357 に答える
58
jQueryは本当に必要ありません。プレーンな JavaScript を使用すると、次のことを簡単に確認でき、意味的に正しいことを確認できます。
if(document.getElementById("myElement")) {
//Do something...
}
何らかの理由で要素に id を付けたくない場合でも、DOM にアクセスするために設計された他の JavaScript メソッドを使用できます。
jQuery は本当にクールですが、純粋な JavaScript を忘れてはいけません...
于 2011-11-14T14:20:52.270 に答える
47
以前のすべての回答で.lengthパラメーターが必要な理由は、ほとんどの場合$()、カーテンの後ろに querySelectorAll を持つ jquery のセレクターを使用している (または直接使用している) ためです。このメソッドは、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);
于 2014-08-11T23:42:19.167 に答える
44
あなた$.contains()が欲しいものですか？
jQuery.contains( container, contained )2 番目の
$.contains()引数で指定された DOM 要素が、最初の引数で指定された DOM 要素の子孫である場合、それが直接の子であるか、より深くネストされているかに関係なく、メソッドは true を返します。それ以外の場合は false を返します。要素ノードのみがサポートされています。2 番目の引数がテキスト ノードまたはコメント ノードの場合、$.contains()false が返されます。注: 最初の引数は、jQuery オブジェクトやプレーンな JavaScript オブジェクトではなく、DOM 要素である必要があります。
于 2013-10-23T05:46:50.707 に答える
44
Javaスクリプトで長さを使用して、要素が存在するかどうかを確認できます。長さが 0 より大きい場合、要素は存在します。長さが 0 の場合、要素は存在しません。
// 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
}
于 2015-07-09T12:39:01.997 に答える
42
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
于 2012-02-06T20:37:55.573 に答える
38
要素の存在を確認する方法は、jQuery の公式 Web サイト自体にきちんと記載されています。
セレクターによって返される jQuery コレクションの.lengthプロパティを使用します。
if ($("#myDiv").length) { $("#myDiv").show(); }要素が存在するかどうかを常にテストする必要はないことに注意してください。次のコードは、要素が存在する場合は表示し、存在しない場合は何もしません (エラーなし)。
$("#myDiv").show();
于 2017-03-22T14:32:49.797 に答える
29
$(selector).length && //Do something
于 2012-05-28T12:58:08.020 に答える
20
オブジェクトが別のオブジェクトの中に存在するかどうかを確認したい場合があったので、最初の回答に何かを追加して、セレクター内のセレクターを確認しました..
// 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;
};
于 2012-04-05T21:02:46.057 に答える
16
$("selector") プロパティを持つオブジェクトを返しlengthます。セレクターが要素を見つけた場合、それらはオブジェクトに含まれます。したがって、その長さを確認すると、要素が存在するかどうかを確認できます。JavaScriptでは、コードを0 == false取得しない場合でも実行されます。0
if($("selector").length){
//code in the case
}
于 2016-03-25T11:05:49.320 に答える
16
私はこれを使用しています：
$.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/
于 2012-08-01T21:56:05.743 に答える
15
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
}
);
于 2016-03-08T17:06:55.657 に答える
15
0likeより大きいかどうかをチェックする必要はありません。要素の存在をチェックする$(selector).length > 0の$(selector).lengthに十分でエレガントな方法です。これだけのために関数を書く価値はないと思います。もっと余分なことをしたいのであれば、そうです。
if($(selector).length){
// true if length is not 0
} else {
// false if length is 0
}
于 2017-06-20T09:43:38.873 に答える
13
さまざまな状況の完全な例と、配列または要素を返すため、jQueryセレクターで機能する場合と機能しない場合を直接使用して要素が存在するかどうかを確認する方法を次に示します。
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>于 2016-07-31T06:42:16.680 に答える
12
これを試して。
シンプルで短く、プロジェクト全体で使用可能:
jQuery.fn.exists=function(){return !!this[0];}; //jQuery Plugin
使用法：
console.log($("element-selector").exists());
_________________________________
OR EVEN SHORTER : ( jQueryプラグインを定義したくない場合):
if(!!$("elem-selector")[0]) ...;
あるいは
if($("elem-selector")[0]) ...;
于 2018-08-18T06:27:02.023 に答える
11
if ( $('#myDiv').size() > 0 ) { //do something }
size()セレクターによって返された要素の数をカウントします
于 2009-02-25T02:44:39.370 に答える
5
jQueryの要素の存在をチェックするためのすべての回答が防弾として機能していません。長年のコーディングの後、このソリューションのみが存在するかどうかについて警告をスローしません。
if($(selector).get(0)) { // Do stuff }
または、関数の冒頭で代わりに救済するには:
if(!$(selector).get(0)) return;
説明した
この場合、ゼロ | を扱う必要はありません。null の長さの問題。これにより、要素をカウントするのではなく、強制的に要素をフェッチします。
于 2018-03-17T02:54:24.280 に答える
2
jQuery では必要ありません。必要な>0のはこれだけです。
if ($(selector).length)
バニラ JS を使用すると、次のように同じことができます。
if(document.querySelector(selector))
bool を返す関数に変換する場合:
const exists = selector => !!document.querySelector(selector);
if(exists(selector)){
// some code
}
于 2019-10-17T18:53:20.667 に答える
-1
次の構文を使用して、jQuery を使用して要素が実際に存在するかどうかを確認します。
let oElement = $(".myElementClass");
if(oElement[0]) {
// Do some jQuery operation here using oElement
}
else {
// Unable to fetch the object
}
于 2016-08-23T13:37:49.653 に答える