Ar yra jQuery funkcija „egzistuoja“?

Kaip patikrinti elemento prieinamumą „jQuery“?

Dabartinis mano kodas yra toks:

 if ($(selector).length > 0) { // Do something } 

Ar yra elegantiškesnis būdas tai pasiekti? Galbūt papildinys ar funkcija?

2475
27 авг. Jake McGraw nustatė rugpjūčio 27 d 2008-08-27 22:49 '08, 10:49 pm 2008-08-27 22:49
@ 40 atsakymų
  • 1
  • 2

„JavaScript“ viskas yra „tiesa“ arba „klaidinga“, o 0 (ir NaN) - tai false , visa kita yra true . Todėl galite rašyti:

 if ($(selector).length) 

Jums nereikia šios dalies >0 .

2204
25 февр. Atsakymą pateikė Tim Büthe 25 vasaris. 2009-02-25 22:16 '09, 10:16 pm 2009-02-25 22:16

Taip

 jQuery.fn.exists = function(){ return this.length > 0; } if ($(selector).exists()) { // Do something } 
border=0

Tai yra atsakas į: podcast patronized su Jeff Atwood

1289
27 авг. Atsakymą pateikė Jake McGraw, rugpjūčio 27 d. 2008-08-27 22:50 '08 10:50 val. 2008-08-27 22:50

Jei naudojote

 jQuery.fn.exists = function(){return ($(this).length > 0);} if ($(selector).exists()) { } 

tai reikštų, kad grandinė buvo įmanoma, jei ne.

Būtų geriau:

 jQuery.exists = function(selector) {return ($(selector).length > 0);} if ($.exists(selector)) { } 

Kaip alternatyvą dažnai užduodamiems klausimams :

 if ( $('#myDiv').length ) {  } 

Taip pat galite naudoti šiuos veiksmus. Jei jQuery objektų matricoje nėra reikšmių, tada pirmasis elemento masyvo elementas gaunamas neapibrėžtas.

 if ( $('#myDiv')[0] ) {  } 
346
14 янв. Atsakyti Jon Erickson 14 d 2009-01-14 22:46 '09 10:46 pm 2009-01-14 22:46

Galite naudoti:

 // if element exists if($('selector').length){  } 

 // if element does not exist if(!$('selector').length){  } 
113
03 апр. Yanni atsakymas 03 Bal 2011-04-03 15:17 '11 prie 15:17 2011-04-03 15:17

Greičiausias ir semantiškai suprantamas būdas patikrinti, ar egzistuoja paprastas „JavaScript“:

 if (document.getElementById('element_id')) { // Do something } 

Tai šiek tiek ilgesnis už alternatyvą „jQuery“ ilgiui, tačiau jis veikia greičiau, nes tai yra JS metodas.

Ir tai yra geriau nei alternatyva rašyti savo jQuery funkciją. Dėl @snover pateiktų priežasčių ši alternatyva yra lėtesnė. Tačiau tai taip pat suteiktų kitiems programuotojams įspūdį, kad egzistuojanti () funkcija yra kažkas, kas yra būdinga jQuery. „JavaScript“ turės suprasti kitus, redaguodamas savo kodą, nepadidindamas skolos sumos.

Pastaba Atkreipkite dėmesį į „#“ nebuvimą prieš elemento_did elementą (nes tai paprastas JS, o ne jQuery).

82
11 янв. Atsakymas duotas Magne 11 jan. 2012-01-11 15:27 '12, 15:27, 2012-01-11 15:27

Rašydami galite išsaugoti kelis baitus:

 if ($(selector)[0]) { ... } 

Tai veikia, nes kiekvienas jQuery objektas taip pat yra užmaskuotas kaip masyvas, todėl galime naudoti masyvo dereference operatorių, kad gautume pirmąjį elementą iš masyvo. Jis grąžina undefined jei nėra nurodyto indekso elemento.

58
18 янв. Atsakymą pateikė Salman A sausio 18 d. 2014-01-18 12:04 '14, 12:04 2014-01-18 12:04

Galite naudoti:

 if ($(selector).is('*')) { // Do something } 

Šiek tiek elegantiškesnis.

54
17 сент. Atsakyti Devon Sep 17 2008-09-17 20:53 '08 at 8:53 pm 2008-09-17 20:53

Šis įskiepis gali būti naudojamas kaip išraiška, pvz., if ($(ele).exist()) { } arba naudojant atšaukimus.

Įskiepis

 ;;(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

Galite nurodyti vieną arba du atšaukimus. Pirmasis veiks, jei elementas egzistuoja, antrasis veiks, jei elementas neegzistuoja. Tačiau, jei nuspręsite perkelti tik vieną funkciją, jis veiks tik tada, kai yra elementas. Taigi grandinė mirs, jei pasirinktas elementas neegzistuoja. Žinoma, jei ji yra, pirmoji funkcija veiks ir grandinė tęsis.

Atminkite, kad naudojant atgalinio ryšio funkciją, palaikoma grandinė - elementas grąžinamas, ir jūs galite tęsti grandinės komandas, kaip ir bet kuris kitas jQuery metodas!

Naudojimo pavyzdys

 if ($.exist('#eleID')) {  } // param as STRING if ($.exist($('#eleID'))) {  } // param as jQuery OBJECT if ($('#eleID').exist()) {  } // enduced on jQuery OBJECT $.exist('#eleID', function() { // param is STRING  CALLBACK METHOD   }, function() { // param is STRING  CALLBACK METHOD   }) $('#eleID').exist(function() { // enduced on jQuery OBJECT with CALLBACK METHOD   }) $.exist({ // param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD element: '#eleID', callback: function() {   } }) 
52
09 нояб. atsakymas pateikiamas SpYk3HH, lapkričio 9 d. 2012-11-09 20:47 '12, 08:47 pm 2012-11-09 20:47

Matau, kad dauguma čia pateiktų atsakymų nėra tokie tikslūs , kokie jie turėtų būti, jie tikrina elemento ilgį, daugeliu atvejų tai gali būti normalu , bet ne 100%, įsivaizduoti, kad vietoj funkcijos yra priimtas numeris, todėl sukuriu funkciją, kad tikrina visas sąlygas ir grąžina atsakymą taip:

 $.fn.exists = $.fn.exists || function() { return !!(this.length  (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); } 

Tai patikrins ilgį ir tipą, dabar galite jį patikrinti taip:

 $(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 
48
20 мая '17 в 12:21 2017-05-20 12:21 Atsakymą Alireza pateikė gegužės 20 d., 17 val., 12:21, 2017-05-05 12:21

Nėra reikalo jQuery. Paprasta „JavaScript“ pagalba lengviau ir semantiškai teisinga patikrinti:

 if(document.getElementById("myElement")) { //Do something... } 

Jei dėl kokių nors priežasčių nenorite nurodyti elemento identifikatoriaus, vis tiek galite naudoti bet kurį kitą „JavaScript“ metodą, skirtą pasiekti DOM.

jQuery yra tikrai kietas, bet neleiskite „JavaScript“ pamiršti ...

47
14 нояб. atsakymas pateikiamas amypellegrini 14 nov. 2011-11-14 17:20 '11, 17:20, 2011-11-14 17:20

Galite naudoti:

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){} 
42
01 июня '13 в 10:20 2013-06-01 10:20 atsakymas duotas Amitābha 01 birželio 13 d. 10:20 2013-06-01 10:20

Priežastis, dėl kurios visi ankstesni atsakymai reikalauja .length parametro, yra tai, kad jie dažniausiai naudoja „jquery $() selektorių, turintį „SelectorAll“ užklausą už užuolaidų (arba jie tiesiogiai jį naudoja). Šis metodas yra gana lėtas, nes jam reikia analizuoti visą DOM medį, ieškant visų šio selektoriaus atitikmenų ir užpildant juos masyvu.

['Ilgis'] parametras nėra reikalingas ar naudingas, o kodas bus daug greičiau, jei vietoj jo naudosite document.querySelector(selector) , nes jis grąžina pirmąjį elementą, kurį jis atitinka, arba nulį, jei nerastas.

 function elementIfExists(selector){ //named this way on purpose, see below return document.querySelector(selector); }  var myelement = elementIfExists("#myid") || myfallbackelement; 

Tačiau šis metodas palieka mums faktinį grąžinimo objektą; kuris yra gerai, jei jis nėra išsaugotas kaip kintamasis ir pakartotinai naudojamas (taigi, jei pamirštume nuorodą).

 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"));  console.log(myel);  myel=null;  

Kai kuriais atvejais tai gali būti reikalinga. Jis gali būti naudojamas kilpoje:

  for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel)) if (myel == myblacklistedel) break; 

Jei tikrai nereikia elemento ir norite gauti / išsaugoti tik tiesą / klaidingą, tiesiog nedvejokite! Jis dirba ant batų, kurie yra nesusieti, todėl kodėl jis čia?

 function elementExists(selector){ return !!document.querySelector(selector); }  var hastables = elementExists("table");  if (hastables){  } setTimeOut(function (){if (hastables  !elementExists("#mytablecss")) alert("bad table layouts");},3000); 
37
12 авг. atsakymą pateikė technosaurus rugpjūčio 12 d 2014-08-12 02:42 '14 at 2:42 2014-08-12 02:42

Radau, kad if ($(selector).length) {} nepakanka. Jis išjungs jūsų programą, kai selector yra tuščias {} objektas.

 var $target = $({}); console.log($target, $target.length); // Console output: // ------------------------------------- // [▼ Object ] 1 // ► __proto__: Object 

Mano vienintelis pasiūlymas yra atlikti papildomą {} patikrinimą.

 if ($.isEmptyObject(selector) || !$(selector).length) { throw new Error('Unable to work with the given selector.'); } 

Aš vis dar ieško geresnio sprendimo, nors tai šiek tiek sunku.

Redaguoti: ĮSPĖJIMAS! Tai neveikia IE, jei selector yra eilutė.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 
32
06 февр. Atsakymas duotas Olegas 06 Feb. 2012-02-06 23:37 '12, 23:37 pm 2012-02-06 23:37

Galite patikrinti, ar elementas yra ar nenaudoja ilgio java scenarijuje. Jei ilgis yra didesnis už nulį, tuomet elementas yra, jei ilgis yra nulis, tada nėra elemento

 // 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 } 
30
09 июля '15 в 15:39 2015-07-09 15:39 atsakymą pateikė Anurag Deokar, liepos 10 d. 15, 15:39 2015-07-09 15:39

Ar $.contains() ko norite?

jQuery.contains( container, contained )

$.contains() metodas grąžinamas tiesa, jei antrojo argumento pateikiamas DOM elementas yra pirmojo argumento DOM elemento palikuonis, nesvarbu, ar jis yra tiesioginis palikuonis, ar giliau įdėtas. Priešingu atveju jis grąžina klaidingą. Palaikomi tik elementų mazgai; jei antrasis argumentas yra teksto arba komentaro mazgas, $.contains() grįš false.

Pastaba Pirmasis argumentas turi būti DOM elementas, o ne jQuery objektas arba įprastas „JavaScript“ objektas.

30
23 окт. Hiway buvo paskelbtas spalio 23 d 2013-10-23 08:46 '13, 8:46, 2013-10-23 08:46

Patikrinkite elemento prieinamumą oficialiame jQuery tinklalapyje!

Naudokite selektoriaus grąžinamą „jQuery“ kolekcijos ilgio savybę:

 if ($("#myDiv").length) { $("#myDiv").show(); } 

Atkreipkite dėmesį, kad ne visada būtina patikrinti, ar elementas egzistuoja. Šis kodas parodys elementą, jei jis yra, ir nieko nedarys (be klaidų), jei jis nėra:

 $("#myDiv").show(); 
26
22 марта '17 в 17:32 2017-03-22 17:32 Atsakymą įteikė Tilak Maddy , kovo 22 d. 17, 17:32 2017-03-22 17:32

tai labai panašus į visus atsakymus, bet kodėl gi ne naudoti operatorių ! du kartus, kad galėtumėte gauti loginę vertę:

 jQuery.fn.exists = function(){return !!this.length}; if ($(selector).exists()) { // the element exists, now what?... } 
25
04 мая '15 в 6:31 2015-05-04 06:31 Atsakymą pateikė Santiago Hernández gegužės 04 d., 15 val. 2015-05-04 06:31
 $(selector).length  //Do something 
25
28 мая '12 в 15:58 2012-05-28 15:58 atsakymą SJG pateikė gegužės 28 d., 12 val. 15:58 2012-05-28 15:58

Išbandykite DOM elemento testavimą.

 if (!!$(selector)[0]) // do stuff 
23
09 авг. atsakymą pateikė guest271314 09 rug . 2015-08-09 05:55 '15 at 5:55 2015-08-09 05:55

Įkvėptas iš atsakymo į kelią, aš atėjau:

 $.fn.exists = function() { return $.contains( document.documentElement, this[0] ); } 

jQuery.contains du DOM elementus ir patikrina, ar pirmasis yra vienas.

Naudokite document.documentElement , nes pirmasis argumentas atlieka exists metodo semantiką, kai norime ją taikyti tik tam, kad patikrintume, ar esamas dokumentas yra esamas.

Žemiau pateikiu fragmentą, kuris lygina jQuery.exists() su $(sel)[0] ir $(sel).length , kurie grąžina truthy ( $(4) , o $(4).exists() grąžina $(4).exists() . Tikrinant, ar DOM elementas egzistuoja , tai atrodo norimas rezultatas .

 td { border: 1px solid black } 
22
13 окт. Atsakymas pateikiamas Oliveriui 13 okt. 2015-10-13 23:01 '15, 11:01 pm 2015-10-13 23:01

Man tai patinka naudodamas paprastą vanilės javascript.

 function isExists(selector){ return document.querySelectorAll(selector).length>0; } 
20
19 июня '16 в 1:37 2016-06-19 01:37 atsakymas duotas Sanui Uthaijam Bollerui birželio 19, 16 d. 1:37 2016-06-19 01:37

Atėjau šį klausimą ir norėčiau pasidalinti šiuo metu naudojamu kodo fragmentu:

 $.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; } 

Ir dabar galiu parašyti tokį kodą -

 $("#elem").exists(function(){ alert ("it exists"); }).otherwise(function(){ alert ("it doesn't exist"); }); 

Tai gali atrodyti kaip daug kodo, bet rašant „CoffeeScript“, tai gana truputį:

 $.fn.exists = (callback) -> exists = @length callback.call() if exists new class otherwise: (fallback) -> fallback.call() if not exists 
18
28 июля '14 в 13:50 2014-07-28 13:50 atsakymas pateikiamas Eternal1 liepos 28 d. 14, 13:50 2014-07-28 13:50

Nėra reikalo jQuery

 if(document.querySelector('.a-class')) { // do something } 
18
28 нояб. Atsakymą pateikė Pawel lapkričio 28 d. 2016-11-28 13:43 '16, 13:43 pm 2016-11-28 13:43

Turėjau atvejį, kai norėjau pamatyti, ar objektas egzistuoja kitoje vietoje, todėl pridėjau kažką prie pirmojo atsakymo, kad patikrintumėte selektoriaus pasirinkimą.

 // 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; }; 
17
06 апр. atsakymas, kurį pateikė jcreamer898 06 Bal 2012-04-06 00:02 '12 prie 0:02 2012-04-06 00:02

Kaip apie:

 function exists(selector) { return $(selector).length; } if (exists(selector)) { // do something } 

Tai labai maža ir taupo laiką, kai reikia kiekvieną kartą įvesti $() selektorių.

16
05 марта '14 в 0:15 2014-03-05 00:15 atsakymas pateikiamas GSTAR kovo 5 d. 14 d. 0:15 2014-03-05 00:15

Naudoju tai:

  $.fn.ifExists = function(fn) { if (this.length) { $(fn(this)); } }; $("#element").ifExists( function($this){ $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')}); } ); 

Paleiskite grandinę tik tada, jei yra elementas jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

12
02 авг. atsakymas duotas andy_314 02 rug . 2012-08-02 00:56 '12 ne 0:56 2012-08-02 00:56

Čia yra mano mėgstamiausias metodas exist esantis jQuery

 $.fn.exist = function(callback) { return $(this).each(function () { var target = $(this); if (this.length > 0  typeof callback === 'function') { callback.call(target); } }); }; 

ir kita versija, kuri palaiko atgalinį ryšį, kai selektoriaus nėra

 $.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); } } }); }; 

Pavyzdys:

 $('#foo .bar').exist( function () { // Stuff when '#foo .bar' exists }, function () { // Stuff when '#foo .bar' does not exist } ); 
11
08 марта '16 в 20:06 2016-03-08 20:06 atsakymą ducdhm davė kovo 8–16 d. 20:06 2016-03-08 20:06

$("selector" ) grąžina objektą, turintį length nuosavybę. Jei selektorius suranda visus elementus, jie bus įtraukti į objektą. Todėl, jei patikrinsite jo ilgį, pamatysite, ar yra kokių nors elementų. „JavaScript“ 0 == false , taigi, jei negausite 0 jūsų kodas veiks.

 if($("selector").length){ //code in the case } 
11
25 марта '16 в 14:05 2016-03-25 14:05 atsakymą pateikė Kamuran Sönecek , kovo 25 d. 16, 14:05 2016-03-25 14:05

Jums nereikia patikrinti, ar šis 0 pakankamas kaip $(selector).length > 0 , $(selector).length ir elegantiškas būdas patikrinti elementų buvimą. Nemanau, kad tai verta rašyti tik tam tikslui, jei norite padaryti daugiau papildomų dalykų, taip.

 if($(selector).length){ // true if length is not 0 } else { // false if length is 0 } 
9
20 июня '17 в 12:43 2017-06-20 12:43 Atsakymą davė Andrejus Todorutas birželio 20 d. 17 val
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() skaičiuoja elemento, kurį grąžina selektorius, skaičių.

8
25 февр. atsakymas duotas Mad_Hat 25 Vas. 2009-02-25 05:44 '09, 5:44 val. 2009-02-25 05:44
  • 1
  • 2

Kiti klausimai apie „ žymes arba „ Klauskite“