Bagaimana saya bisa memeriksa keberadaan unsur di jQuery?
Saat ini kode yang saya miliki adalah ini:
if ($(selector).length > 0) {
// Do something
}
Apakah ada cara yang lebih elegan untuk pendekatan ini? Mungkin plugin atau fungsi?
Ya!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
Ini adalah respon terhadap: Menggiring Kode podcast dengan Jeff Atwood
Jika anda digunakan
jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }
anda akan menyiratkan bahwa chaining adalah mungkin ketika itu tidak.
Ini akan menjadi lebih baik:
jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }
Atau, dari FAQ:
if ( $('#myDiv').length ) { /* Do something */ }
Anda juga bisa menggunakan langkah berikut. Jika tidak ada nilai-nilai dalam objek jQuery array kemudian mendapatkan item pertama dalam array akan kembali undefined.
if ( $('#myDiv')[0] ) { /* Do something */ }
Cara tercepat dan paling semantik diri menjelaskan cara memeriksa keberadaan sebenarnya dengan menggunakan plain `JavaScript:
if (document.getElementById('element_id')) {
// Do something
}
Itu adalah sedikit lebih lama untuk menulis dari jQuery suhu udara turun menjadi alternatif, tapi mengeksekusi lebih cepat karena itu adalah asli JS metode.
Dan itu lebih baik daripada alternatif penulisan anda sendiri jQuery
fungsi. Alternatif yang lebih lambat, untuk alasan @snover menyatakan. Tapi hal ini juga akan memberikan programmer lain kesan bahwa ada()
fungsi adalah sesuatu yang melekat pada jQuery. JavaScript
akan/harus dipahami oleh orang lain mengedit kode anda, tanpa peningkatan pengetahuan utang.
NB: Melihat kurangnya an '#' sebelum element_id
(karena ini adalah polos JS, bukan jQuery
).
Anda dapat menyimpan beberapa byte dengan menulis:
if ($(selector)[0]) { ... }
Ini bekerja karena masing-masing objek jQuery juga menyamar sebagai array, sehingga kita dapat menggunakan array dereferencing operator untuk mendapatkan item pertama dari array. Kembali undefined
jika tidak ada item pada indeks tertentu.
Plugin ini dapat digunakan dalam sebuah jika
pernyataan seperti if ($(ele).ada()) { /* LAKUKAN PEKERJAAN */ }
atau menggunakan callback.
;;(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](
)Anda dapat menentukan satu atau dua callback. Pertama yang akan memecat jika elemen yang ada, yang kedua akan menyala jika elemen tidak tidak ada. Namun, jika anda memilih untuk lulus hanya satu fungsi, itu hanya akan diaktifkan ketika elemen yang ada. Dengan demikian, jaringan akan mati jika elemen yang dipilih tidak tidak ada. Tentu saja, jika itu tidak ada, fungsi pertama akan api dan rantai akan terus berlanjut.
Perlu diingat bahwa menggunakan callback varian membantu menjaga chainability – unsur yang dikembalikan dan anda dapat melanjutkan chaining perintah seperti halnya metode 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 */
}
})
Saya melihat sebagian besar jawaban di sini adalah tidak akurat seperti yang seharusnya, mereka memeriksa elemen panjang, hal ini dapat OK dalam banyak kasus, tetapi tidak 100%, bayangkan jika jumlah lulus untuk fungsi alih, jadi aku prototipe fungsi yang memeriksa semua kondisi dan mengembalikan jawaban seperti itu harus:
$.fn.exists = $.fn.exists || function() {
return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement));
}
Ini akan memeriksa kedua panjang dan jenis, Sekarang anda dapat memeriksa ini dengan cara:
$(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
Ada's tidak perlu untuk jQuery benar-benar. Dengan JavaScript biasa itu's mudah dan semantik benar untuk memeriksa:
if(document.getElementById("myElement")) {
//Do something...
}
Jika untuk alasan apapun anda don't ingin menempatkan id untuk elemen, anda masih dapat menggunakan JavaScript metode yang dirancang untuk mengakses DOM.
jQuery adalah benar-benar keren, tapi don't membiarkan murni JavaScript jatuh ke terlupakan...
Alasan semua jawaban sebelumnya membutuhkan .panjang
parameter adalah bahwa mereka sebagian besar menggunakan jquery's $()
pemilih yang telah querySelectorAll di balik tirai (atau mereka menggunakannya secara langsung). Metode ini agak lambat karena kebutuhan untuk mengurai seluruh pohon DOM mencari semua cocok untuk yang pemilih dan mengisi array dengan mereka.
Yang ['panjang'] parameter tidak diperlukan atau berguna dan kode akan jauh lebih cepat jika anda langsung gunakan dokumen.querySelector(pemilih)
bukan, karena itu kembali elemen pertama itu cocok atau null jika tidak ditemukan.
function elementIfExists(selector){ //named this way on purpose, see below
return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;
Namun metode ini meninggalkan kita dengan objek yang sebenarnya yang dikembalikan; yang baik-baik saja jika itu isn't akan disimpan sebagai variabel dan digunakan berulang kali (dengan demikian menjaga referensi jika kita lupa).
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 */
Dalam beberapa kasus ini mungkin yang diinginkan. Hal ini dapat digunakan untuk loop seperti ini:
/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
if (myel == myblacklistedel) break;
Jika anda don't benar-benar membutuhkan elemen dan ingin mendapatkan/toko yang benar/palsu, hanya dua kali tidak !! Ia bekerja untuk sepatu yang datang mengikat, jadi mengapa simpul di sini?
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);
Adalah $.berisi()
apa yang anda inginkan?
jQuery.berisi( wadah, yang terkandung )
$.berisi()
metode mengembalikan nilai true jika elemen DOM yang diberikan oleh argumen kedua adalah keturunan dari elemen DOM yang diberikan oleh argumen pertama, apakah itu anak langsung atau bersarang lebih mendalam. Jika tidak, ia mengembalikan false. Hanya elemen node yang didukung; jika argumen kedua adalah teks atau komentar node,$.berisi()
akan kembali palsu.
Catatan: argumen pertama harus menjadi elemen DOM, bukan objek jQuery atau JavaScript polos objek.
Saya telah menemukan if ($(selector).length) {}
menjadi tidak cukup. Itu diam-diam akan istirahat aplikasi anda ketika pemilih
adalah objek kosong {}
.
var $target = $({});
console.log($target, $target.length);
// Console output:
// -------------------------------------
// [▼ Object ] 1
// ► __proto__: Object
Hanya saran saya adalah untuk melakukan pemeriksaan tambahan untuk {}
.
if ($.isEmptyObject(selector) || !$(selector).length) {
throw new Error('Unable to work with the given selector.');
}
I'm masih mencari solusi yang lebih baik meskipun seperti yang satu ini agak berat.
Edit: PERINGATAN! Ini doesn't bekerja di IE ketika pemilih
adalah string.
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
Anda dapat memeriksa elemen hadir atau tidak menggunakan panjang dalam java script. Jika suhu udara lebih besar dari nol, maka elemen hadir jika panjang adalah nol, maka elemen tidak hadir
// 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
}
Mengecek keberadaan unsur didokumentasikan dengan rapi dalam resmi jQuery website itu sendiri!
Menggunakan .suhu udara milik jQuery koleksi yang dikembalikan oleh anda selector:
if ($("#myDiv").length) { $("#myDiv").show(); }
Perhatikan bahwa isn't selalu diperlukan untuk menguji apakah suatu elemen ada. kode berikut akan menunjukkan elemen jika ada, dan melakukan apa-apa (tanpa kesalahan) jika tidak:
$("#myDiv").show();
ini sangat mirip dengan semua jawaban, tapi kenapa tidak gunakan !
operator dua kali sehingga anda bisa mendapatkan boolean:
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
Terinspirasi oleh hiway's jawaban saya datang dengan berikut:
$.fn.exists = function() {
return $.contains( document.documentElement, this[0] );
}
jQuery.berisi membutuhkan dua elemen DOM dan cek apakah yang pertama berisi kedua.
Menggunakan dokumen.documentElement
sebagai argumen pertama memenuhi semantik ada
metode ketika kita ingin menerapkan hal itu semata-mata untuk memeriksa keberadaan suatu elemen dalam dokumen saat ini.
Di bawah ini, saya've menempatkan bersama-sama cuplikan yang membandingkan jQuery.ada()
melawan $(sel)[0]
dan $(sel).panjang
pendekatan yang kedua kembali truthy
nilai-nilai $(4)
sementara $(4).ada()
mengembalikan palsu
. Dalam konteks memeriksa keberadaan dari elemen DOM ini tampaknya menjadi yang diinginkan.
$.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>