web-dev-qa-db-ja.com

セレクタがnullを返した場合どうすれば検出できますか

JQueryセレクターが空のオブジェクトを返すかどうかを検出するための最良の方法は何ですか。もしあなたがそうするなら：

alert($('#notAnElement'));

あなたは[object Object]を取得するので、私は今それを行う方法は次のとおりです。

alert($('#notAnElement').get(0));

これは "undefined"と書くので、それをチェックすることができます。しかし、それはとても悪いようです。他にどのような方法がありますか？

jqueryjquery-selectors
259
peirix

私のお気に入りは、この小さな便利さでjQueryを拡張することです。

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

のように使われる：

$("#notAnElement").exists();

長さを使用するよりも明確です。

477
Magnar
if ( $("#anid").length ) {
  alert("element(s) found")
} 
else {
  alert("nothing found")
}
193
duckyflip

セレクタはjQueryオブジェクトの配列を返します。一致する要素が見つからない場合は、空の配列を返します。セレクタから返されたコレクションの.lengthをチェックするか、最初の配列要素が 'undefined'であるかどうかをチェックすることができます。

IFステートメント内でany次の例を使用すると、すべて同じ結果が生成されます。セレクタが一致する要素を見つけた場合はtrue、そうでない場合はfalse.

$('#notAnElement').length > 0
$('#notAnElement').get(0) !== undefined
$('#notAnElement')[0] !== undefined
63
Jose Basilio

私はこのようなことをするのが好きです：

$.fn.exists = function(){
    return this.length > 0 ? this : false;
}

それで、あなたはこのようなことをすることができます：

var firstExistingElement = 
    $('#iDontExist').exists() ||      //<-returns false;
    $('#iExist').exists() ||          //<-gets assigned to the variable 
    $('#iExistAsWell').exists();      //<-never runs

firstExistingElement.doSomething();   //<-executes on #iExist

http://jsfiddle.net/vhbSG/

38
CSharp

Ruby on Rails からヒントを得たpresenceを使うのが好きです。

$.fn.presence = function () {
    return this.length !== 0 && this;
}

あなたの例は次のようになります。

alert($('#notAnElement').presence() || "No object found");

あなたはまだブール演算子やifを使うことができるので、私はそれが提案された$.fn.existsより優れていると思いますが、真実の結果はより有用です。もう一つの例：

$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem)
$ul.append('...')
9
Marc-André Lafortune

私の好みで、これがなぜjQueryに組み込まれていないのか私にはわかりません。

$.fn.orElse = function(elseFunction) {
  if (!this.length) {
    elseFunction();
  }
};

こんな感じで使われる：

$('#notAnElement').each(function () {
  alert("Wrong, it is an element")
}).orElse(function() {
  alert("Yup, it's not an element")
});

あるいは、CoffeeScriptで見たように：

$('#notAnElement').each ->
  alert "Wrong, it is an element"; return
.orElse ->
  alert "Yup, it's not an element"
7
nilskp

これはJQueryのドキュメントにあります。

http://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

  alert( $( "#notAnElement" ).length ? 'Not null' : 'Null' );
6
Daniel De León