javascript - 사용법 - jQuery에 "존재"기능이 있습니까?




jquery란 (20)

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

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

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

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


JavaScript에서는 모든 것이 '진실'또는 '위증'이며 숫자 0 (및 NaN)의 경우 false 의미 true . 그래서 다음과 같이 작성할 수 있습니다.

if ($(selector).length)

>0 초과 할 필요는 없습니다.


jQuery 필요 없음

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

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

개체가 다른 개체 내부에 있는지 확인하고자하는 경우가있어서 선택기 내부의 선택기를 확인하는 첫 번째 답변에 뭔가를 추가했습니다.

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

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

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

이것은 각 jQuery 객체가 배열로 가장하기 때문에 작동합니다. 따라서 배열 역 참조 연산자를 사용하여 배열에서 첫 번째 항목을 가져올 수 있습니다. 지정된 인덱스에 항목이 없으면 undefined 반환합니다.


당신이 사용할 수있는:

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

더 우아하고.


여기에있는 대부분의 대답은 정확하지 않아서 요소 길이를 확인합니다. 그러나 많은 경우에 괜찮을 수 있지만 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: '', url: 'http://www..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


이것을 사용할 수 있습니다 :

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

이것을 사용할 수 있습니다 :

jQuery.fn.extend({
    exists: function() { return this.length }
});

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

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

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

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

jQuery 길이 대체 방법보다 약간 더 쓰지만 네이티브 JS 메서드이므로 더 빨리 실행됩니다.

그리고 자신의 jQuery 함수를 작성하는 것보다 낫습니다. 그 대안은 느린 이유입니다. 그러나 그것은 또한 다른 프로그래머에게 exist () 함수가 jQuery에 내재되어 있다는 인상을 줄 것입니다. 자바 스크립트는 지식 빚없이 코드를 편집하는 다른 사람들이 이해해야 만합니다.

주의 : element_id 앞에 '#'이 없다는 사실을 알아 두십시오 (이것은 jQuery가 아닌 일반 JS이기 때문에).


엘리먼트의 존재를 확인하는 것은 공식 jQuery 웹 사이트 자체에 문서화되어있다.

선택기에서 반환 한 jQuery 컬렉션의 .length 속성을 사용하십시오.

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

엘리먼트가 존재하는지 테스트 할 필요는 없다. 다음 코드는 요소가 있으면 표시하고없는 경우 아무 것도 수행하지 않습니다 (오류없이).

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

$("selector" )는 length 데이터가있는 객체를 제공합니다. 선택기에서 정의한대로 요소가 있으면 객체에서 가져옵니다. 그래서 당신이 allready 찾을 수있는 길이를 확인한다면, 거기에 어떤 요소가 존재합니다. 자바 스크립트에서 0 == false 또한 null == false . 0 얻지 못하면 코드가 실행됩니다.

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

DOM 요소를 테스트 해보십시오.

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

if ($(ele).exist()) { /* DO WORK */ } 와 같은 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    */
    }
})

안녕하세요 답변에 의해 영감을 다음과 함께 올랐다 :

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

$.contains() 는 두 개의 DOM 요소를 사용하여 첫 번째 요소가 두 번째 요소를 포함하는지 여부를 확인합니다.

document.documentElement 를 첫 번째 인수로 사용하면 현재 문서에서 요소의 존재를 확인하기 위해 단독으로 적용하려는 경우 exists 메서드의 의미를 충족시킵니다.

아래에서는 jQuery.exists()$(sel)[0]$(sel).length 접근 방식과 truthy 하여 $(4) truthy 값을 반환하는 스 니펫을 $(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>


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




jquery