jQuery에 "존재하는" 기능이 있습니까?

질문자 :Jake McGraw

jQuery에서 요소의 존재를 어떻게 확인할 수 있습니까?

내가 가지고있는 현재 코드는 다음과 같습니다.

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

이것에 접근하는 더 우아한 방법이 있습니까? 아마도 플러그인 또는 기능?

JavaScript에서 모든 것은 'truthy' 또는 'falsy'이며 숫자의 경우 0 은 false 의미하고 나머지는 모두 true 의미합니다. 따라서 다음과 같이 작성할 수 있습니다.

 if ($(selector).length)

>0 부분이 필요하지 않습니다.

Tim Büthe

예!

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

이것은 Jeff Atwood의 Herding Code 팟캐스트 에 대한 응답입니다.

Jake McGraw

사용한 경우

 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 객체 배열에 값이 없으면 배열의 첫 번째 항목을 가져오면 정의되지 않은 값이 반환됩니다.

 if ( $('#myDiv')[0] ) { /* Do something */ }

Jon Erickson

다음을 사용할 수 있습니다.

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

---

 // if element does not exist if(!$('selector').length){ /* do something */ }

Yanni

존재를 확인하는 가장 빠르고 의미론적으로 자체 설명하는 방법은 실제로 일반 JavaScript .

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

jQuery 길이 대안보다 작성하는 데 시간이 조금 더 길지만 기본 JS 메서드이기 때문에 더 빠르게 실행됩니다.

jQuery 함수를 작성하는 것보다 낫습니다. @nover가 언급한 이유로 그 대안은 더 느립니다. 그러나 이는 다른 프로그래머들에게 exists() 함수가 jQuery 고유의 기능이라는 인상을 주기도 합니다. JavaScript 는 지식 부채 증가 없이 코드를 편집하는 다른 사람들이 이해할 수 있어야 합니다.

주의: element_id 앞에 '#'이 없는 것에 주목하십시오 jQuery 아니라 일반 JS이기 때문입니다).

Magne

다음을 작성하여 몇 바이트를 절약할 수 있습니다.

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

이 작품은 각각의 jQuery 객체는 가장 무도회는 배열로, 그래서 우리는 배열에서 첫 번째 항목을 얻을 수있는 배열 역 참조 연산자를 사용할 수 있기 때문이다. 지정된 인덱스에 항목이 없으면 undefined 반환합니다.

Salman A

당신이 사용할 수있는:

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

조금 더 우아하게, 아마도.

Devon

이 플러그인은 if ($(ele).exist()) { /* DO WORK */ } 같은 if 문이나 콜백을 사용하여 사용할 수 있습니다.

플러그인

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

하나 또는 두 개의 콜백을 지정할 수 있습니다. 요소가 있으면 첫 번째 요소가 실행되고 요소가 존재하지 않으면 두 번째 요소가 실행됩니다. 그러나 하나의 함수만 전달하도록 선택하면 요소가 존재할 때만 실행됩니다. 따라서 선택한 요소가 없으면 체인이 죽습니다. 물론 존재하는 경우 첫 번째 기능이 실행되고 체인이 계속됩니다.

콜백 변형을 사용하면 연결성을 유지하는 데 도움이 됩니다 . 요소가 반환되고 다른 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 */ } })

Community Wiki

여기에 있는 대부분의 답변이 정확하지 않다는 것을 알았습니다. 요소 길이를 확인합니다 . 많은 경우에 괜찮을 수 있지만 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

Alireza

jQuery는 실제로 필요하지 않습니다. 일반 JavaScript를 사용하면 다음을 확인하는 것이 더 쉽고 의미상 정확합니다.

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

어떤 이유로든 요소에 id를 입력하지 않으려면 DOM에 액세스하도록 설계된 다른 JavaScript 메서드를 계속 사용할 수 있습니다.

jQuery는 정말 멋지지만 순수한 JavaScript가 망각에 빠지지 않도록 하십시오...

amypellegrini

다음을 사용할 수 있습니다.

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){/*do something*/}

Amitābha

이전의 모든 답변에 .length 매개변수가 필요한 이유는 대부분 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);

technosaurus

원하는 것이 $.contains() 입니까?

jQuery.contains( container, contained )

$.contains() 메서드는 두 번째 인수가 제공하는 DOM 요소가 첫 번째 인수가 제공하는 DOM 요소의 후손이면 그것이 직계 자식이든 더 깊이 중첩되든 관계없이 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 요소 노드만 지원됩니다. 두 번째 인수가 텍스트 또는 주석 노드인 경우 $.contains() 는 false를 반환합니다.

참고 : 첫 번째 인수는 jQuery 객체나 일반 JavaScript 객체가 아니라 DOM 요소여야 합니다.

hiway

자바 스크립트에서 길이를 사용하여 요소가 있는지 여부를 확인할 수 있습니다. 길이가 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 }

Anurag Deokar

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

이 방법이 약간 무겁긴 하지만 여전히 더 나은 솔루션을 찾고 있습니다.

편집: 경고! selector 가 문자열인 경우 IE에서는 작동하지 않습니다.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

Oleg

요소의 존재 확인 은 공식 jQuery 웹 사이트 자체에 깔끔하게 문서화되어 있습니다!

선택기가 반환한 jQuery 컬렉션 의 .length 속성을 사용합니다.

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

요소가 있는지 여부를 항상 테스트할 필요는 없습니다. 다음 코드는 요소가 존재하는 경우 표시하고 존재하지 않는 경우 아무 작업도 수행하지 않습니다(오류 없음).

 $("#myDiv").show();

Tilak Maddy

이것은 모든 답변과 매우 유사하지만 ! 부울을 얻을 수 있도록 연산자를 두 번:

 jQuery.fn.exists = function(){return !!this.length}; if ($(selector).exists()) { // the element exists, now what?... }

Santiago Hernández

$(selector).length && //Do something

SJG

DOM 요소 테스트 시도

 if (!!$(selector)[0]) // do stuff

guest271314

hiway의 답변에서 영감을 받아 다음을 생각해 냈습니다.

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

jQuery.contains 는 두 개의 DOM 요소를 취하고 첫 번째 요소에 두 번째 요소가 포함되어 있는지 확인합니다.

document.documentElement 를 첫 번째 인수로 사용하면 현재 문서에 요소의 존재 여부를 확인하기 위해서만 적용하려는 경우 exists

다음은, 내가 함께 비교하는 조각 넣었습니다 jQuery.exists() 에 대해 $(sel)[0] 과 $(sel).length 하는 모두 반환 접근 truthy 값 $(4) 동안 $(4).exists() false 반환합니다. DOM에 요소 가 있는지 확인 하는 맥락 에서 이것은 원하는 결과인 것 같습니다.

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

Oliver

jQuery가 필요 없음(기본 솔루션)

 if(document.querySelector('.a-class')) { // do something }

아래에 훨씬 더 성능이 좋은 옵션이 있습니다(-class 앞에 점이 없음에 주의).

 if(document.getElementsByClassName('a-class')[0]) { // do something }

querySelector는 jQuery에서 $()(sizzle)와 같은 적절한 일치 엔진을 사용하고 더 많은 컴퓨팅 성능을 사용하지만 99%의 경우에는 문제가 없습니다. 두 번째 옵션은 더 명시적이며 코드에 수행할 작업을 정확히 알려줍니다. jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25 에 따르면 훨씬 빠릅니다.

Pawel

나는 이것을하기 위해 일반 바닐라 자바 스크립트를 사용하고 싶습니다.

 function isExists(selector){ return document.querySelectorAll(selector).length>0; }

Sanu Uthaiah Bollera

이 질문을 우연히 발견하여 현재 사용하는 코드 스니펫을 공유하고 싶습니다.

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

Eternal1

객체가 다른 객체 안에 존재하는지 확인하고 싶은 경우가 있어서 선택자 내부의 선택자를 확인하기 위해 첫 번째 답변에 무언가를 추가했습니다.

 // 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; };

jcreamer898

어때요:

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

그것은 매우 최소한이며 매번 $()

MAX POWER

나는 이것을 사용하고 있습니다 :

 $.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/

andy_314

$("selector" length 속성을 가진 객체를 반환합니다. 선택기가 요소를 찾으면 해당 요소가 개체에 포함됩니다. 따라서 길이를 확인하면 요소가 있는지 확인할 수 있습니다. 자바 스크립트에서 0 == false , 그래서 당신은하지 않을 경우 0 코드가 실행됩니다.

 if($("selector").length){ //code in the case }

Kamuran Sönecek

다음은 jQuery에서 내가 가장 좋아하는 exist 방법입니다.

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

ducdhm

$(selector).length > 0 , $(selector).length 와 같이 0 보다 큰지 확인할 필요가 없습니다. 충분하고 요소의 존재를 확인하는 우아한 방법입니다. 나는 이것만을 위한 함수를 작성할 가치가 있다고 생각하지 않습니다. 만약 당신이 더 많은 것을 하고 싶다면 그렇습니다.

 if($(selector).length){ // true if length is not 0 } else { // false if length is 0 }

Andrei Todorut

다음은 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>

abhirathore2006

출처 : http:www.stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery