jQuery에서 요소의 존재를 어떻게 확인할 수 있습니까?
현재 가지고있는 코드는 다음과 같습니다.
if ($(selector).length > 0) {
// Do something
}
이것에 접근하는 더 우아한 방법이 있습니까? 아마도 플러그인이나 함수?
JavaScript에서는 모든 것이 '진실'또는 '위증'이며 숫자는0(및 NaN)은false, 그 밖의 모든 것true. 그래서 다음과 같이 작성할 수 있습니다.
if ($(selector).length)
너는 필요 없어.>0부품.
NaN != false. - Robert[] + []=""... 아아, 나는 자바 스크립트를 좋아한다. - James
예!
jQuery.fn.exists = function(){ return this.length > 0; }
if ($(selector).exists()) {
// Do something
}
이것은에 대한 답입니다 :제프 앳 우드 (Jeff Atwood)와 허딩 코드 포드 캐스트
$.fn.exists예를 들어, 속성 조회 (cheap!)를 두 개의 함수 호출로 대체하는 것이 훨씬 더 비쌉니다. 이러한 함수 호출 중 하나는 이미 가지고있는 jQuery 객체를 재 작성합니다. - C Snover.exists깨끗하게 읽는 반면,.length의미가 동일한 결과와 일치하는 경우에도 의미 상으로 다른 것으로 읽습니다. - Ben Zotto
네가 사용했다면
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 */ }
$(".missing").css("color", "red")이미 옳은 일을하고 있습니다 ... (즉, 아무 것도) - Ben Blank$.fn새 jQuery 객체가 아닌 다른 것을 반환하는 메서드이므로 체인을 연결하지 않아야합니다. - Alnitak
이것을 사용할 수 있습니다 :
// 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 함수를 작성하는 것보다 낫습니다. 그 대안은 느린 이유입니다. 그러나 그것은 또한 다른 프로그래머에게 exist () 함수가 jQuery에 내재되어 있다는 인상을 줄 것입니다. 자바 스크립트는 지식 빚없이 코드를 편집하는 다른 사람들이 이해해야 만합니다.
주의 : element_id 앞에 '#'이 없다는 사실을 알아 두십시오 (이것은 jQuery가 아닌 일반 JS이기 때문에).
$('#foo a.special'). 그리고 그것은 하나 이상의 요소를 반환 할 수 있습니다.getElementById접근 할 수 없습니다. - kikitoif(document.querySelector("#foo a.special"))작동 할 것이다. jQuery가 필요하지 않습니다. - Blue Skies
다음과 같이 작성하여 몇 바이트를 절약 할 수 있습니다.
if ($(selector)[0]) { ... }
이것은 각 jQuery 객체가 배열로 가장하기 때문에 작동합니다. 그래서 배열 역 참조 연산자를 사용하여정렬. 그것은undefined지정된 인덱스에 항목이없는 경우.
jQuery.first()또는jQuery.eq(0)두 객체 모두 반환, 객체가 비어 있더라도 진실입니다. 이 예제는 왜이 기능을 그대로 사용할 수 없는지 설명해야합니다.if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists") - Salman A.eq(0)길이가 1 또는 0으로 절단 된 다른 jQuery 객체를 반환합니다..first()에 대한 편리한 방법 일뿐입니다..eq(0). 그러나.get(0)첫 번째 DOM 요소를 반환하거나undefined그리고 같은[0]. jQuery 객체의 첫 번째 DOM 요소는 이름이있는 일반 객체 속성에 저장됩니다.'0'. 이는 단순한 부동산 액세스 권한입니다. 유일한 타입 캐스팅은 숫자의 암시적인 변환에서 비롯됩니다.0끈에'0'. 따라서 타입 캐스팅이 문제라면 사용할 수 있습니다.$.find(selector)['0']대신. - Robert
당신이 사용할 수있는:
if ($(selector).is('*')) {
// Do something
}
에이작은아마도 더 우아 할 것입니다.
666코드가 손상된 다른 이유가 많이있을 것입니다. 유효하지 않은 선택자 인 반면 $ (666) .length유효한 자바 스크립트입니다.: 그것은 진리로 평가되므로 그러므로할까요조건을 만족시킨다. - Todd$.find(666).length공장. - Emile Bergeron
이 플러그인은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콜백은 실제로 객체에서 인수로 전달됩니까? - Chris Marisic
jQuery는 실제로 필요하지 않습니다. 일반 JavaScript를 사용하면 다음을 확인하는 것이 더 쉽고 의미 상 정확합니다.
if(document.getElementById("myElement")) {
//Do something...
}
어떠한 이유로 든 id를 요소에 넣고 싶지 않으면 DOM에 액세스하도록 설계된 다른 JavaScript 메서드를 계속 사용할 수 있습니다.
jQuery는 정말 멋지지만 순수 자바 스크립트가 망각에 빠지게 만들지 마라.
나는 대부분의 대답이 여기에있는 것을 본다.정확하지 않다.그들은해야한다, 그들은 요소 길이를 확인, 그것은 많은 경우에 괜찮을 수 있지만, 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.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something*/}
이전의 모든 답변을 요구하는 이유는.length매개 변수는 대부분 jquery를 사용한다는 것입니다.$()selector는 커튼 뒤에 querySelectorAll이 있거나 (또는 직접 사용하고 있습니다.) 이 방법은 찾고있는 전체 DOM 트리를 구문 분석해야하기 때문에 다소 느립니다.모든해당 선택기와 일치하고 배열을 채 웁니다.
[ 'length'] 매개 변수는 필요하지 않거나 유용하지 않으며 직접 사용하면 코드가 훨씬 빨라집니다.document.querySelector(selector)대신에 첫 번째 요소를 반환하므로 일치하지 않거나 null 인 경우 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;
실제로 요소가 필요하지 않고 참 / 거짓 만 가져 오거나 저장하려는 경우 두 배로 설정하지 마십시오! 그것은 풀려나는 신발에 효과가 있습니다. 그래서 왜 여기 매듭을합니까?
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.');
}
이 중 하나가 무거운만큼 나는 여전히 더 나은 해결책을 찾고있다.
편집하다:경고!이것은 IE에서 작동하지 않습니다.selector문자열입니다.
$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE
$()빈 객체를 인수로 사용하여? - nnnnnn{}에$()? - cpburnz
자바 스크립트에서 요소가 있는지 검사 할 수 있습니다. 길이가 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
}
~이다.$.contains()뭘 원해?
jQuery.contains( container, contained )그만큼
$.contains()메서드는 두 번째 인수에서 제공 한 DOM 요소가 첫 번째 인수에서 제공 한 DOM 요소의 자손이고 직접 자식인지 또는보다 깊이 중첩되는지에 관계없이 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 요소 노드 만 지원됩니다. 두 x 째 인수가 텍스트 또는 주석 노드 인 경우,$.contains()거짓을 반환합니다.노트: 첫 번째 인수는 jQuery 객체 또는 일반 JavaScript 객체가 아닌 DOM 요소 여야합니다.
$(selector).length && //Do something
if어디서?if2 바이트의 비용으로 가독성을 향상시킬 수 있습니다. - Emile Bergeron&&너를 위해서. - user7892745
이것은 모든 답변과 매우 유사하지만 왜!연산자를 두 번 사용하면 부울을 얻을 수 있습니다.
jQuery.fn.exists = function(){return !!this.length};
if ($(selector).exists()) {
// the element exists, now what?...
}
Boolean(x)양철통때때로더 효율적으로 - user7892745
테스트 해보십시오.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>
나는 이것을하기 위해 단순한 바닐라 자바 스크립트를 사용하고 싶다.
function isExists(selector){
return document.querySelectorAll(selector).length>0;
}
개체가 다른 개체 내부에 있는지 확인하고자하는 경우가있어서 선택기 내부의 선택기를 확인하는 첫 번째 답변에 뭔가를 추가했습니다.
// 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;
};
나는이 질문에 비틀 거리고 나는 현재 사용하고있는 코드 스 니펫을 공유하고 싶다.
$.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
jQuery 필요 없음
if(document.querySelector('.a-class')) {
// do something
}
어때?
function exists(selector) {
return $(selector).length;
}
if (exists(selector)) {
// do something
}
매우 작으며 셀렉터를 다음과 같이 묶지 않아도됩니다.$()때마다.
if($("#thing").exists(){}로 읽습니다. 또한 jQuery 방식이 아닙니다. - 1j01
나는 이것을 사용하고있다 :
$.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/
여기 내 마음에 드는 것이있다.existjQuery의 메소드
$.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데이터. 선택기에서 정의한대로 요소가 있으면 객체에서 가져옵니다. 그래서 당신이 allready 찾을 수있는 길이를 확인한다면, 거기에 어떤 요소가 존재합니다. 자바 스크립트에서0 == false또한null == false. 네가 얻지 못하면0코드가 실행됩니다.
if($("selector").length){
//code in the case
}
if ( $('#myDiv').size() > 0 ) { //do something }
size()selector에 의해 반환 된 원소의 수를 센다.
.size()돌아 오는 것 이상으로 아무것도하지 않는다..length. 사용 중지 된 이유가 있습니다. - Ian.length, 속성이기 때문에 함수 호출보다 오버 헤드가 약간 적다..size(). 내 잘못이야. - Furbeenator
그것이 더 큰지 확인하지 않아도됩니다.0처럼$(selector).length > 0,$(selector).length요소의 존재를 확인하는 데는 충분하고 우아한 방법입니다. 더 많은 일을하고 싶다면,이 일에만 쓸 수있는 가치가 있다고 생각하지 않습니다.
if($(selector).length){
// true if length is not 0
} else {
// false if length is 0
}