jQuery에 대한 "존재"기능이 있습니까?

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 님의 Herding Code podcast 님의 질문에 답변

사용한 경우

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

존재를 확인하는 가장 빠르고 의미 론적으로 자기 설명 방법은 실제로 plain을 사용하는 것입니다 JavaScript.

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

jQuery 길이 대안보다 작성하는 것이 약간 더 길지만 기본 JS 메소드이므로 더 빠르게 실행됩니다.

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

NB : 앞에 '#'이 없다는 것을 주목하십시오 element_id(이것은 일반 JS이기 때문에 jQuery).

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

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

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

당신이 사용할 수있는:

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

작은 아마도 더 우아한.

이 플러그인은 콜백 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);

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    */
    }
})

나는 대부분의 대답이 정확하지 않다는 것을 알았습니다. 요소 길이를 확인합니다 . 많은 경우 OK 일 수 있지만 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매개 변수가 필요한 이유 는 주로 $()커튼 뒤에 querySelectorAll이있는 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);

가 $.contains()당신이 원하는?

jQuery.contains( container, contained )

이 $.contains()메소드는 두 번째 인수가 제공 한 DOM 요소가 첫 번째 인수가 제공 한 DOM 요소의 하위 요소 (직접 하위 요소이든 더 깊이 중첩되어 있는지)인지 여부를 리턴합니다. 그렇지 않으면 false를 반환합니다. 요소 노드 만 지원됩니다. 두 번째 인수가 텍스트 또는 주석 노드이면 $.contains()false를 반환합니다.

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

나는 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

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 컬렉션 의 .length 속성을 사용하십시오 .

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

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

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

jQuery.contains 는 두 개의 DOM 요소를 가져 와서 첫 번째 요소가 두 번째 요소를 포함하는지 확인합니다.

document.documentElement첫 번째 인수로 사용 exists하면 현재 문서에서 요소의 존재를 확인하기 위해 적용 할 때만 메소드 의 의미를 충족시킵니다 .

아래에서는 while returns 값을 반환 jQuery.exists()하는 $(sel)[0]및 $(sel).length접근 방식 과 비교하는 스 니펫을 작성했습니다 . DOM에 요소 가 있는지 검사 하는 상황 에서 이것은 원하는 결과 인 것 같습니다 .truthy$(4)$(4).exists()false

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

jQuery 불필요 (기본 솔루션)

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

아래에서 훨씬 더 성능이 좋은 옵션 (클래스 전에 점이 없음에 유의하십시오).

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

querySelector는 jQuery에서 $ () (sizzle)과 같은 적절한 일치 엔진을 사용하고 더 많은 컴퓨팅 성능을 사용하지만 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
}

매우 작으며 $()매번 선택기를 동봉해야합니다 .

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

    $.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속성 이있는 객체를 반환합니다 . 선택기가 요소를 찾으면 해당 요소가 객체에 포함됩니다. 따라서 길이를 확인하면 요소가 있는지 확인할 수 있습니다. JavaScript에서는 코드를 0 == false얻지 못하면 0코드가 실행됩니다.

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

다음은 jQuery 선택기에서 배열 또는 요소를 반환하기 때문에 직접 if를 사용하여 요소가 존재하는지 여부를 확인하는 다양한 상황과 방법의 완전한 예입니다.

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
}