문제
jQuery에 요소의 존재를 어떻게 확인할 수 있습니까?
내가 가진 현재 코드는 다음과 같습니다.
if ($(selector).length > 0) {
// Do something
}
이것에 접근하는 더 우아한 방법이 있습니까? 아마도 플러그인이나 기능일까요?
해결책
JavaScript에서는 모든 것이 '진실'또는 '거짓'이며 숫자 0
(및 Nan)를 의미합니다 false
, 다른 모든 것 true
. 그래서 당신은 다음을 쓸 수 있습니다.
if ($(selector).length)
당신은 그것을 필요로하지 않습니다 >0
부분.
다른 팁
예!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
이것은 다음과 같습니다. Jeff Atwood와 함께 코드 팟 캐스트
사용한 경우
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 */ }
당신은 이것을 사용할 수 있습니다 :
// 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
지식 부채가 증가하지 않고 다른 사람들이 코드를 편집하는 사람이 이해해야합니다.
NB : 이전에 '#'의 부족을 주목하십시오. element_id
(이것은 평범한 JS이기 때문에 jQuery
).
글을 쓰면 몇 바이트를 저장할 수 있습니다.
if ($(selector)[0]) { ... }
이것은 각 jQuery 객체가 배열로 가장 무도회하기 때문에 작동하므로 배열 DeEperencing 연산자를 사용하여 첫 번째 항목을 얻을 수 있습니다. 정렬. 돌아옵니다 undefined
지정된 색인에 항목이없는 경우
당신이 사용할 수있는:
if ($(selector).is('*')) {
// Do something
}
ㅏ 작은 아마도 더 우아합니다.
이 플러그인은 An에서 사용할 수 있습니다 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 */
}
})
여기에 대부분의 답변이 있습니다 정확하지 않습니다 그들은 요소 길이를 확인해야합니다. 확인 대부분의 경우 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...
}
어떤 이유로 든 요소에 ID를 넣고 싶지 않은 경우 DOM에 액세스하도록 설계된 다른 JavaScript 메소드를 사용할 수 있습니다.
jQuery는 정말 시원하지만 순수한 JavaScript가 망각에 빠지게하지 마십시오 ...
당신은 이것을 사용할 수 있습니다 :
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;
실제로 요소가 필요하지 않고 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);
나는 찾았다 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
문자열입니다.
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
~이다 $.contains()
당신이 원하는 것은 무엇입니까?
jQuery.contains( container, contained )
그만큼
$.contains()
두 번째 인수에 의해 제공된 DOM 요소가 직접 자식이든 더 깊이 중첩되었는지 여부에 관계없이 첫 번째 인수에 의해 제공된 DOM 요소의 후손 인 경우 방법은 true를 반환합니다. 그렇지 않으면 거짓을 반환합니다. 요소 노드 만 지원됩니다. 두 번째 인수가 텍스트 또는 주석 노드 인 경우$.contains()
거짓을 반환합니다.메모: 첫 번째 인수는 jQuery 객체 또는 일반 JavaScript 객체가 아닌 DOM 요소 여야합니다.
Java 스크립트에서 요소가 존재하거나 사용하지 않는 것을 확인할 수 있습니다. 길이가 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
}
요소의 존재를 확인합니다 공식 jQuery 웹 사이트 자체에 깔끔하게 문서화되어 있습니다!
사용 .길이 선택기가 반환 한 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
테스트를 시도하십시오 DOM
요소
if (!!$(selector)[0]) // do stuff
에서 영감을 받다 하이웨이의 대답 나는 다음을 생각해 냈다.
$.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>
나는이 작업을 수행하기 위해 일반 바닐라 JavaScript를 사용하고 싶습니다.
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
jQuery가 필요하지 않습니다
if(document.querySelector('.a-class')) {
// do something
}
나는이 질문을 우연히 발견했고 현재 사용하고있는 코드 스 니펫을 공유하고 싶습니다.
$.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
}
그것은 매우 최소이며 선택기를 $()
매번.
나는 이것을 사용하고있다 :
$.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 선택기에서 Direct를 사용하여 요소가 존재하는지 확인하는 방법입니다. 배열 또는 요소를 반환하기 때문에 작동하거나 작동하지 않을 수 있습니다.
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
}