Exists&quot &quot 있어요;; 기능을 포함한다.

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

현재 보유하고 있는 코드를 로만스였나:

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

이 방법은 보다 세련된 있나요? 아마도 a 플러그인에는 또는 함수?

René
편집된 질문16일 12월 2017 в 11:29
프로그래밍
javascript jquery
27일 8월 2008 в 7:49
26 파운드
질문에 대한 의견 (1)
해결책

39, & # 39 는 JavaScript 에서, 모든 truthy&. # 39, & # 39, 또는 falsy& 숫자에 대해서는 '거짓', '0' (및 NaN), 그리고 다른 모든 것을 'true'. 그래서 작성할 수 있습니다.

if ($(selector).length)

39, 부품, that '0' t need &gt don& 있습니다.

해설 (22)

구로췌!

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

이는 이에 대해 다음과 같이 사용된다. [제프 애트우드 포드캐스트를 코드를 통해 것이다] [1]

[1]: http://herdingcode.com/? p = 36

vaxquis
편집된 답변13일 2월 2017 в 10:37
해설 (11)

사용할 경우

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

그대는 체인식으로 연결 할 수 있다는 것을 의미한다) 는 아니다.

이 낫겠다.

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

[&Solarisdvd FAQ] 또는 1:

if ( $('#myDiv').length ) { /* Do something */ }

다음 사용할 수도 있습니다. 없으면 jQuery 객체가 array 의 값을 얻을 수 있는 첫 번째 항목에 어졌다면 어레이입니다 돌아갈 것이라고 정의되지 않았습니다.

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

이 사용할 수 있습니다.

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

가장 빠르고 의미 설명하는 방법을 사용하여 JavaScript '일반' 존재 자체 확인할지 실제로.

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

조금만 더 이상 쓸 수 있지만, 이 때문에 빠른 길이 교체품 실행하므로 포함한다 () 는 js 메서드입니다.

또 다른 쓰는 것보다 더 나은 자신의 '' 기능을 포함한다. 느린 이유를 들어 있는 대안은 @snover 밝혔다. 하지만 이 또한 다른 프로그래머들이 인상을 줄 수 있는 '뭔가' () 는 고유의 기능을 포함한다. ',' 다른 사람이 이해할 수 없는 것이라고 하는 JavaScript 코드를 편집으로 / 지식 향상 된다.

  • & # 39, & # 39 는 디이브이 NB:* 없어. 전에 'element_id' (이후 이 아닌 '일반' JS 포함한다).

Randika Vishman
편집된 답변9일 2월 2019 в 3:48
해설 (11)

몇 바이트입니다 쓰는 방식으로 저장할 수 있습니다.

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

이 때문에 각 작동됨 jQuery 객체가 array 데레페렌츠링 마스 쿼 레이 딩 표시됨과 어레이입니다 또한 첫 번째 항목을 사용할 수 있도록 작동자 afaq &solarisdvd array. 되돌려줍니다 정의되지 않은 '' 이 없으면 항목설명프로세서 dell. 지정된 색인입니다.

해설 (4)

"만약 이 플러그인을 사용할 수 있는 '기술서임을 like' 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  0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (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);

[이스피들] (http://jsfiddle.net/SpYk3/cEUR 5/)

하나 또는 두 개의 콜백 지정할 수 있습니다. 첫 번째 요소는 존재하는 경우, 두 번째 one 은 불지옥의 거역한다면 불지옥의 않을 경우 요소점 높여줍니까 존재합니다. 그러나 한 가지 기능만 전달할 때, 그렇지 않을 경우에는 미디어만을 불지옥의 요소점 존재합니다. 따라서 이 경우 선택한 요소점 높여줍니까 타임코드가 체인에서의 죽을 수 없습니다. 가 있을 경우, 첫 번째 기능은 물론, 화재 및 체인에서의 계속될 것이라고 밝혔다.

      • 콜백하는 사용하는 것을 유념해야 할 수 있는 요소 반환됨 진실이며당신이 체인식으로 연결 명령의세 계속 유지할 수 있도록 도와줍니다 하이나빌레티 변형 경우와 마찬가지로 다른 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    */
    }
})
해설 (1)

사용할 수 있습니다.

if ($(selector).is('*')) {
  // Do something
}
  • A * 좀 더 세련된 모른다.
해설 (5)

내가 보고 있는 것처럼, 그들은 대부분 정확하지 여기에 대답을 합니다 확인 할 수 있지만, 대부분의 경우 확인란 요소점 길이 얻게된다면 상상할 수 없는 경우, 함수에 대한 전달하십시오 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
편집된 답변17일 7월 2019 в 11:59
해설 (0)

39 의 jQuery 거절한다구요 there& 필요 없습니다. # 39 의 JavaScript it& 천에 쉽고 의미적으로 올바른 확인할 수 있습니다.

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

39, 어떤 이유로든 너회가 don& 요소의 id 를 동일팔레트에 싶지 않다, JavaScript 고안되었습니다 DOM 액세스하려면 다른 방법을 계속 사용할 수 있습니다.

jQuery 는 정말 멋진 # 39 분류될 수 있지만, 순수 JavaScript don& t let 오블리비언.

해설 (2)

이 사용할 수 있습니다.

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

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

그 이유는 이전의 모든 답을 할 수 있는 이들은 대부분 's', '트렌크스 파라메트가 jquery& 사용하여 디스크입니다. diskid 크리스 엘리스랄라 선택기를 커튼 뒤에 # 39$ ()' (또는 사용하고 바로). 이 방법은 대답하도다 느린 필요가 있기 때문에 전체 DOM 진단트리는 분석할 수 있는 모든 찾고 있는 어레이에서는 저들이요 채우기 위해 일치시킵니다 선택기를 및

이 [# 39, & # 39 length&;] 파라메트가 필요 없거나 코드와 될 경우 직접 사용하는 것이 훨씬 빨리 도쿠망스케리셀레스 (선택기를) '대신' 첫 번째 요소를 찾을 수 없는 경우 또는 null 되돌려줍니다 일치시킵니다 있기 때문이다.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

그러나 이 방법은 실제 객체에는 반환되었습니다 찻입 가 우리에게 있다. # 39 로 저장할 수 있는 경우, 미세 isn& 어쩔 수 없는 변수 및 반복적으로 사용 (카타시안 상태로 우리가 잊고 수립하였습니다 참조).

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;

정작 필요한 경우, t want to get / 작성하든지 don& # 39 요소와 단순한 참 / 거짓, 그냥 연산뿐 아니야!! 그런데 왜 묶이지 않은 제공되는 작동하잖아 신발에 대한 세제곱인치 여기서요?

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);
해설 (0)

는 ['$ 스콘테인스 ()'] (http://api.jquery.com/jQuery.contains/) 그리웠댔지?

&gt 제크리스콘테인스 (컨테이너인 v2.03-00) ','

이 경우 () ',' $ 스콘테인스 &gt 되돌려줍니다 DOM element 의 인수가 하위 두 번째 방법을 제공하는 진정한 DOM element 모두인지 직접 제공한 첫 번째 인수, 하위 또는 네스트된 더욱 깊이. 그렇지 않으면 거짓값 되돌려줍니다. 요소만 노드입니다 지원됩니다. 만약 두 번째 argument 는 텍스트 또는 주석입니다 노드 () ',' $ 스콘테인스 반환되므로 거짓값.

&gt , 참고: 첫 번째 인수 DOM element, jQuery 객체가 아닌 JavaScript 객체 또는 일반 합니다.

Mohammad
편집된 답변28일 10월 2018 в 9:57
해설 (1)

내가 할 수 없는 'if ($ (선택기를) 트렌크스) {}' 부족합니다. Break your app '가 빈 객체에는 선택기를 때 자동으로 것' ' {}'.

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

39 m 로, 더 나은 솔루션 i& 여전히 찾고 있지만 이건 좀 무거운 편이다.

편집: , T # 39 이 때 IE 작업하십시오 doesn& 경고! '은' 선택기를 구체화하십시오.

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

이 길이 사용하여 자바 스크립트 방관하겠나 요소점과 확인할 수 있습니다. 이 경우 그 다음 요소가 전혀 없는 경우 길이 길이 χ02 보다 크다. 요소점 존재하지 않습니다.

// 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
}
해설 (2)

[존재를 확인하는 요소를] (https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/) 는 웹 사이트 자체가 깔끔하게 문서화했습니다 jQuery 의 공식!

&gt. List. [트렌크스] (https://api.jquery.com/length/) 재산에 따라 반환되었습니다 jQuery 취합은 &gt. 선택기를: &gt. &gt. if ($ (# myDiv&quot ";) 트렌크스) { &gt. 리쇼 (), $ (&quot, # myDiv") &gt. } &gt. &gt. 단, t # 39 이 표시할지를 테스트하려면 isn& 항상 필요한 요소가 있습니다. &gt. 다음 코드는 있으면 아무 일도 하지 않을 것이라고 볼 수 있는 요소 및 &gt. (오류 없이) 없는 경우. &gt. &gt. 리쇼 (), $ (&quot, # myDiv")

Palec
편집된 답변10일 9월 2017 в 10:31
해설 (0)

이 모든 것이 매우 비슷하지만, 이에 대한 답을 얻을 수 있도록 '!' 를 사용하지 않는 이유는 두 번 연산자입니다 부울입니다:

jQuery.fn.exists = function(){return !!this.length};

if ($(selector).exists()) {
    // the element exists, now what?...
}
해설 (1)
$(selector).length && //Do something
해설 (2)

테스트 시도하시겠습니까 DOM '요소'

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

영감을 [hiway& # 39 의 오토메이티드] (https://stackoverflow.com/a/19533724/177710) I came up with 다음과 같습니다.

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

[제크리스콘테인스] (http://api.jquery.com/jQuery.contains/) 는 두 번째 1 에는 DOM 요소와 있는지 확인합니다.

'의' 존재 '를 사용하여 도쿠망스도쿠멘텔레먼트' 첫 번째 인수로 충족합니다 시맨틱스를 메서드로부터 적용하십시오 존재를 확인할 수 있는 요소를 단독으로 할 때 우리는 현재 문서.

39, ve 동일팔레트에 비교하는 아래 I& 스니핏 제크리스렉시츠 () '이' 대한 '$ (sele) [0]' 와 '$ (sele)' 의 값을 모두 트렌크스 외곽진입 복귀하십시오 트루시 '$ (4)' '어떤' 동시에 '$ (4) 되돌려줍니다 그렉시츠 ()' '거짓'. 또한 DOM 이 요소의 존재에 대한 확인 관점에서 원하는 결과를 얻기 것으로 보인다.

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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

끝 - &lt 스니핏 >;!

Community
편집된 답변23일 5월 2017 в 11:47
해설 (0)