ฉันจะตรวจสอบการมีอยู่ขององค์ประกอบใน jQuery ได้อย่างไร?
รหัสปัจจุบันที่ฉันมีคือ:
if ($(selector).length > 0) {
// Do something
}
มีวิธีที่สง่างามกว่าในการเข้าถึงสิ่งนี้หรือไม่? บางทีอาจเป็นปลั๊กอินหรือฟังก์ชั่น?
ฉันจะตรวจสอบการมีอยู่ขององค์ประกอบใน jQuery ได้อย่างไร?
รหัสปัจจุบันที่ฉันมีคือ:
if ($(selector).length > 0) {
// Do something
}
มีวิธีที่สง่างามกว่าในการเข้าถึงสิ่งนี้หรือไม่? บางทีอาจเป็นปลั๊กอินหรือฟังก์ชั่น?
คำตอบ:
ใน JavaScript ทุกอย่างเป็น 'truthy' หรือ 'falsy' และสำหรับตัวเลข0
(และน่าน) หมายถึงทุกอย่างอื่นfalse
true
ดังนั้นคุณสามารถเขียน:
if ($(selector).length)
คุณไม่ต้องการ>0
ส่วนนั้น
NaN != false
นั่นเอง
[] + []
= ""
... อ่าฉันรักจาวาสคริปต์
[].toString() === [].join(',') === ""
"" === ""
typeof NaN == 'number'
ใช่
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
นี่คือการตอบสนองต่อ: Herding Code podcast กับ Jeff Atwood
$.fn.exists
ตัวอย่างของคุณกำลังแทนที่การค้นหาคุณสมบัติ (ราคาถูก!) ด้วยการเรียกใช้ฟังก์ชันสองครั้งซึ่งมีราคาแพงกว่ามากและการเรียกฟังก์ชันหนึ่งในนั้นจะสร้างวัตถุ jQuery ที่คุณมีอยู่แล้วซึ่งเป็นเพียงความโง่เขลา
.exists
อ่านอย่างสะอาดตาในขณะที่.length
อ่านเป็นสิ่งที่แตกต่างกันทางความหมายถึงแม้ว่าความหมายตรงกับผลลัพธ์ที่เหมือนกัน
ถ้าคุณใช้
jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }
คุณจะบอกเป็นนัยว่าการผูกมัดเป็นไปได้เมื่อมันไม่
นี่จะดีกว่า:
jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }
อีกทางเลือกหนึ่งจากคำถามที่พบบ่อย :
if ( $('#myDiv').length ) { /* Do something */ }
คุณสามารถใช้สิ่งต่อไปนี้ หากไม่มีค่าในอาร์เรย์วัตถุ jQuery การรับไอเท็มแรกในอาร์เรย์จะส่งคืนค่าที่ไม่ได้กำหนด
if ( $('#myDiv')[0] ) { /* Do something */ }
$(".missing").css("color", "red")
สิ่งที่ถูกต้องแล้ว… (ไม่มีอะไร)
$.fn
ที่ส่งคืนสิ่งอื่นนอกเหนือจากวัตถุ jQuery ใหม่และดังนั้นจึงไม่โยงกัน
คุณสามารถใช้สิ่งนี้:
// 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
ผู้อื่นจะ / ควรเข้าใจโค้ดของคุณโดยไม่ต้องเพิ่มหนี้ความรู้
หมายเหตุ:สังเกตเห็นการขาด '#' ก่อนหน้าelement_id
(เนื่องจากนี่เป็น JS ธรรมดาไม่ใช่jQuery
)
$('#foo a.special')
ตัวอย่างเช่น และมันสามารถคืนองค์ประกอบได้มากกว่าหนึ่งองค์ประกอบ getElementById
ไม่สามารถเริ่มวิธีการนั้นได้
if(document.querySelector("#foo a.special"))
จะทำงานได้ ไม่จำเป็นต้องใช้ jQuery
คุณสามารถบันทึกไม่กี่ไบต์โดยการเขียน:
if ($(selector)[0]) { ... }
งานนี้เพราะแต่ละวัตถุ jQuery ยังปลอมตัวเป็นอาร์เรย์เพื่อให้เราสามารถใช้อาร์เรย์ dereferencing ผู้ประกอบการที่จะได้รับรายการแรกจากอาร์เรย์ มันจะส่งกลับundefined
ถ้าไม่มีรายการที่ดัชนีที่ระบุ
jQuery.first()
หรือjQuery.eq(0)
วัตถุทั้งสองคืนวัตถุนั้นเป็นความจริงแม้ว่าวัตถุนั้นจะว่างเปล่าก็ตาม ตัวอย่างนี้ควรแสดงให้เห็นว่าทำไมฟังก์ชั่นเหล่านี้จึงไม่สามารถใช้ได้ตามที่เป็นอยู่:if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
.eq(0)
ผลตอบแทนเพียงอีกหนึ่งวัตถุ jQuery ตัดทอนความยาว 1 หรือ 0. เป็นเพียงวิธีการที่สะดวกสบายสำหรับ.first()
.eq(0)
แต่.get(0)
ผลตอบแทนที่ได้องค์ประกอบ DOM ครั้งแรกหรือครั้งและเป็นเช่นเดียวกับundefined
[0]
องค์ประกอบ DOM แรกในวัตถุ jQuery '0'
ถูกเก็บไว้ในสถานที่ให้บริการปกติวัตถุที่มีชื่อ นั่นเป็นคุณสมบัติที่เข้าถึงได้ง่าย ประเภทเดียวหล่อเกิดจากการแปลงโดยนัยของจำนวนสตริง0
'0'
ดังนั้นหากการหล่อแบบเป็นปัญหาคุณสามารถใช้$.find(selector)['0']
แทนได้
คุณสามารถใช้ได้:
if ($(selector).is('*')) {
// Do something
}
เล็ก ๆ น้อย ๆที่สง่างามมากขึ้นอาจจะ
666
อาจมีเหตุผลอื่น ๆ อีกมากมายที่รหัสของพวกเขาเสีย ในขณะที่มันเป็นตัวเลือกที่ไม่ถูกต้อง แต่ $ (666) ความยาวเป็นจาวาสคริปต์ที่ถูกต้อง : มันจะประเมินความจริงดังนั้นจึงควรตรงตามเงื่อนไข
$.find(666).length
งานได้
ปลั๊กอินนี้สามารถใช้ใน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 */
}
})
Has Items
ส่งผ่านวัตถุเป็นอาร์กิวเมนต์ใช่หรือไม่
ฉันเห็นคำตอบส่วนใหญ่ที่นี่ไม่ถูกต้องอย่างที่ควรจะเป็นพวกเขาตรวจสอบความยาวขององค์ประกอบมันสามารถตกลงได้ในหลาย ๆ กรณี แต่ไม่ใช่ 100%ลองจินตนาการว่าถ้าจำนวนผ่านไปยังฟังก์ชั่นแทน เงื่อนไขและคืนคำตอบตามที่ควรจะเป็น:
$.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 จริงๆ ด้วย JavaScript ธรรมดามันง่ายกว่าและถูกต้องทางความหมายในการตรวจสอบ:
if(document.getElementById("myElement")) {
//Do something...
}
หากด้วยเหตุผลใดก็ตามที่คุณไม่ต้องการใส่รหัสในองค์ประกอบคุณยังสามารถใช้วิธี JavaScript อื่น ๆ ที่ออกแบบมาเพื่อเข้าถึง DOM
jQuery เจ๋งจริงๆ แต่อย่าปล่อยให้จาวาสคริปต์ที่บริสุทธิ์หลงลืมไป ...
:has()
?
คุณสามารถใช้สิ่งนี้:
jQuery.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something*/}
เหตุผลที่คำตอบก่อนหน้านี้ทั้งหมดต้องการ.length
พารามิเตอร์ก็คือพวกเขาส่วนใหญ่ใช้$()
ตัวเลือกของ jquery ซึ่งมี querySelectorAll อยู่หลังม่าน (หรือพวกเขากำลังใช้มันโดยตรง) วิธีนี้ค่อนข้างช้าเพราะมันต้องแยกแผนภูมิทรี DOM ทั้งหมดเพื่อค้นหาการจับคู่ทั้งหมดกับตัวเลือกนั้นและเติมอาร์เรย์ด้วย
ไม่จำเป็นต้องใช้พารามิเตอร์ ['length'] หรือมีประโยชน์และรหัสจะเร็วขึ้นมากถ้าคุณใช้โดยตรงdocument.querySelector(selector)
เนื่องจากจะส่งคืนองค์ประกอบแรกที่ตรงกับหรือเป็นโมฆะหากไม่พบ
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 */
ในบางกรณีอาจต้องการ มันสามารถใช้ในการห่วงเช่นนี้:
/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
if (myel == myblacklistedel) break;
หากคุณไม่ต้องการองค์ประกอบและต้องการรับ / จัดเก็บเป็นจริง / เท็จเพียงแค่เพิ่มมันเป็นสองเท่า !! มันใช้งานได้กับรองเท้าที่หลุดออกมาทำไมต้องมาที่นี่ด้วย?
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);
คือ$.contains()
สิ่งที่คุณต้องการ?
jQuery.contains( container, contained )
$.contains()
วิธีการส่งกลับจริงถ้าองค์ประกอบ DOM ที่มีให้โดยอาร์กิวเมนต์ที่สองเป็นลูกหลานขององค์ประกอบ DOM ที่มีให้โดยอาร์กิวเมนต์แรกไม่ว่าจะเป็นเด็กตรงหรือซ้อนกันอย่างลึกซึ้งยิ่งขึ้น มิฉะนั้นจะส่งคืนค่าเท็จ สนับสนุนโหนดองค์ประกอบเท่านั้น ถ้าอาร์กิวเมนต์ที่สองเป็นข้อความหรือโหนดความคิดเห็น$.contains()
จะกลับเท็จหมายเหตุ : อาร์กิวเมนต์แรกจะต้องเป็นองค์ประกอบ DOM ไม่ใช่วัตถุ jQuery หรือวัตถุ JavaScript ธรรมดา
ฉันพบว่า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
$()
ด้วยวัตถุที่ว่างเปล่าเป็นอาร์กิวเมนต์?
{}
ไปบนโลก$()
?
คุณสามารถตรวจสอบองค์ประกอบที่มีอยู่หรือไม่ใช้ความยาวในจาวาสคริปต์ หากความยาวมากกว่าศูนย์จะมีองค์ประกอบอยู่หากความยาวเป็นศูนย์จะไม่มีองค์ประกอบอยู่
// 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
}
การตรวจสอบการมีอยู่ขององค์ประกอบนั้นได้รับการบันทึกไว้ในเว็บไซต์ทางการของ jQuery!
ใช้คุณสมบัติ. lengthของคอลเล็กชัน jQuery ที่ส่งคืนโดยตัวเลือกของคุณ:
if ($("#myDiv").length) { $("#myDiv").show(); }
โปรดทราบว่าไม่จำเป็นเสมอไปที่จะทดสอบว่ามีองค์ประกอบอยู่หรือไม่ รหัสต่อไปนี้จะแสดงองค์ประกอบหากมีอยู่และไม่ทำอะไรเลย (โดยไม่มีข้อผิดพลาด) หากไม่มี:
$("#myDiv").show();
นี่คล้ายกับคำตอบทั้งหมด แต่ทำไมไม่ใช้!
โอเปอเรเตอร์สองครั้งเพื่อให้คุณได้บูลีน:
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
$(selector).length && //Do something
if
ที่if
ควรปรับปรุงความสามารถในการอ่านค่า 2 ไบต์
ลองทดสอบDOM
องค์ประกอบ
if (!!$(selector)[0]) // do stuff
ได้รับแรงบันดาลใจจากคำตอบของ hiwayฉันได้รับสิ่งต่อไปนี้:
$.fn.exists = function() {
return $.contains( document.documentElement, this[0] );
}
jQuery.containใช้สององค์ประกอบ DOM และตรวจสอบว่าองค์ประกอบแรกมีองค์ประกอบที่สองหรือไม่
ใช้document.documentElement
เป็นอาร์กิวเมนต์แรกตอบสนองความหมายของexists
วิธีการเมื่อเราต้องการใช้มันเพียงเพื่อตรวจสอบการดำรงอยู่ขององค์ประกอบในเอกสารปัจจุบัน
ด้านล่างนี้ผมได้รวบรวมข้อมูลโค้ดที่เปรียบเทียบjQuery.exists()
กับ$(sel)[0]
และ$(sel).length
วิธีการที่ทั้งสองกลับมาtruthy
ค่า$(4)
ในขณะที่ผลตอบแทน$(4).exists()
false
ในบริบทของการตรวจสอบสำหรับการดำรงอยู่ขององค์ประกอบใน DOM ๆ นี้น่าจะเป็นผลลัพธ์ที่ต้องการ
ไม่จำเป็นต้องใช้ jQuery (โซลูชันพื้นฐาน)
if(document.querySelector('.a-class')) {
// do something
}
ตัวเลือกที่มีประสิทธิภาพมากขึ้นด้านล่าง (สังเกตเห็นการขาดจุดก่อนคลาส)
if(document.getElementsByClassName('a-class')[0]) {
// do something
}
querySelector ใช้เครื่องมือการจับคู่ที่เหมาะสมเช่น $ () (เสียงดังฉ่าว) ใน jQuery และใช้พลังการประมวลผลมากขึ้น แต่ในกรณี 99% จะทำได้ดี ตัวเลือกที่สองนั้นชัดเจนยิ่งขึ้นและบอกรหัสว่าจะต้องทำอย่างไร มันเร็วกว่ามากตาม jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25
ฉันแค่ต้องการใช้จาวาสคริปต์ธรรมดาในการทำเช่นนี้
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
ฉันสะดุดกับคำถามนี้และฉันต้องการแบ่งปันข้อมูลโค้ดที่ฉันใช้อยู่ในปัจจุบัน:
$.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
ฉันมีกรณีที่ฉันต้องการดูว่ามีวัตถุอยู่ภายในของวัตถุอื่นหรือไม่ดังนั้นฉันจึงเพิ่มบางสิ่งลงในคำตอบแรกเพื่อตรวจสอบตัวเลือกภายในตัวเลือก ..
// 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;
};
เกี่ยวกับ:
function exists(selector) {
return $(selector).length;
}
if (exists(selector)) {
// do something
}
มันน้อยมากและช่วยให้คุณไม่ต้องล้อมรอบตัวเลือกด้วย$()
ทุกครั้ง
if($("#thing").exists(){}
อ่านว่า นอกจากนี้ยังไม่ใช่วิธี jQuery
ฉันใช้สิ่งนี้:
$.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/
นี่คือ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
}
);
$("selector"
) ส่งคืนวัตถุที่มีlength
คุณสมบัติ หากตัวเลือกพบองค์ประกอบใด ๆ พวกเขาจะรวมอยู่ในวัตถุ ดังนั้นหากคุณตรวจสอบความยาวคุณจะเห็นว่ามีองค์ประกอบใดบ้าง ใน JavaScript 0 == false
ดังนั้นหากคุณไม่ได้รับ0
รหัสของคุณจะทำงาน
if($("selector").length){
//code in the case
}
นี่คือตัวอย่างที่สมบูรณ์ของสถานการณ์ที่แตกต่างกันและวิธีการตรวจสอบว่าองค์ประกอบที่มีอยู่ใช้โดยตรงถ้าในตัวเลือก 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
คุณไม่ได้มีการตรวจสอบว่าเป็นมากกว่า0
เช่น$(selector).length > 0
, $(selector).length
ก็พอและเป็นวิธีที่สง่างามในการตรวจสอบการดำรงอยู่ขององค์ประกอบ ฉันไม่คิดว่ามันคุ้มค่าที่จะเขียนฟังก์ชั่นสำหรับสิ่งนี้เท่านั้นหากคุณต้องการทำสิ่งต่าง ๆ เพิ่มเติมใช่
if($(selector).length){
// true if length is not 0
} else {
// false if length is 0
}