선택기가 null을 반환하는지 어떻게 알 수 있습니까?


271

jQuery 선택기가 빈 객체를 반환하는지 감지하는 가장 좋은 방법은 무엇입니까? 당신이 할 경우 :

alert($('#notAnElement'));

[object Object]를 얻게되므로 지금하는 방법은 다음과 같습니다.

alert($('#notAnElement').get(0));

"정의되지 않음"으로 표시되므로이를 확인할 수 있습니다. 그러나 그것은 매우 나쁜 것 같습니다. 다른 방법은 무엇입니까?

답변:


494

내가 가장 좋아하는 것은이 작은 편의로 jQuery를 확장하는 것입니다.

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

다음과 같이 사용됩니다.

$("#notAnElement").exists();

길이를 사용하는 것보다 더 명확합니다.


2
왜 'this'를 $ () 안에 넣었습니까? 이 컨텍스트에서 'this'는 실제로 jQuery 객체를 가리 키지 않습니까?
Adham Atta

1
복귀하는 this것이보다 도움이 된다는 것을 알게되었습니다 true. 내 답변 포팅 Rails의 presence방법을 참조하십시오 .
Marc-André Lafortune

5
체인화 기능을 유지하려는 경우, 함수가 true를 리턴하거나이 메소드를 사용 this하여 변수 에 지정 하려는 경우 리턴 문을 CSharp 가있는 것으로 변경하는 것이 좋습니다 .
Hanna

1
Magnar,이 "확장"기능이 실제로 어떻게 작동하는지 설명해 주시겠습니까? 나는 그것이 자바 스크립트 개념이며 엄격하게 JQuery 개념이 아니라고 가정합니다. 프로토 타입을 조사했지만 여기에 적용되는지 왜 구문이 "$ .fn"인지 확실하지 않습니다.
KyleM

3
@ 아담 예. 그러나이 경우 jQuery 작동 방식에 따라 존재 확인을 삭제해야합니다. 선택기와 일치하는 요소가 없으면 무언가를하지 않습니다.
Magnar

197
if ( $("#anid").length ) {
  alert("element(s) found")
} 
else {
  alert("nothing found")
}

67

선택기는 jQuery 객체의 배열을 반환합니다. 일치하는 요소가 없으면 빈 배열을 반환합니다. .length선택기에서 반환 한 컬렉션 중 하나를 확인하거나 첫 번째 배열 요소가 '정의되지 않음'인지 확인할 수 있습니다 .

당신이 사용할 수 있는 IF 문 안에 다음 예를 그들은 모두가 생산 같은 결과를. 선택자가 일치하는 요소를 찾았 으면 true이고, 그렇지 않으면 false입니다.

$('#notAnElement').length > 0
$('#notAnElement').get(0) !== undefined
$('#notAnElement')[0] !== undefined

1
.length코드가 뜨겁지 않으면 사용 합니다. 의도적으로 가장 분명합니다. 또한 .size()더 이상 사용되지 않으며 수년간 사용되었습니다 (1.8 이후). 나는 당신의 대답을 편집하고 그것을 제거하고, 메모와 함께 자유롭게 다시 추가 할 것이지만 너무 오래되었으므로 더 나아 졌다고 생각합니다.
Evan Carroll

1
기술적으로 DOM 노드가없는 jQuery 객체를 반환합니다. 빈 배열을 반환한다고 말하는 것이 옳지 않습니다.
Vigrant

39

나는 이런 식으로하고 싶다 :

$.fn.exists = function(){
    return this.length > 0 ? this : false;
}

따라서 다음과 같이 할 수 있습니다.

var firstExistingElement = 
    $('#iDontExist').exists() ||      //<-returns false;
    $('#iExist').exists() ||          //<-gets assigned to the variable 
    $('#iExistAsWell').exists();      //<-never runs

firstExistingElement.doSomething();   //<-executes on #iExist

http://jsfiddle.net/vhbSG/


6
@Ehsan 실제로 허용 된 답변의 복제본이 아닙니다. 허용 된 답변은 true / false 만 반환하지만이 답변은 원래 개체 ( "this") 또는 false를 반환합니다 . 이 답변을 사용하면 거짓이 아닌 경우 반환 값으로 추가 작업 (예 : 추가 기능 체인)을 수행 할 수 있습니다.
RSW

1
표준 툴킷에 정확히 동일한 코드가 있습니다. 이 형식은 Rails의 object.presence와 동일하며 @CSharp이 설명하는 대체 구성에 매우 유용합니다.
inopinatus

이것은 좋은 대답이지만 테스트 된 요소가 없을 경우 어떻게되는지 설명하면 도움이됩니다. 짧은 대답 : TypeError: firstExistingElement.doSomething is not a function. if ()에서 전체 변수 할당 / 테스트를 래핑 할 수 있으며 요소가 발견 된 경우에만 무언가를 수행 할 수 있습니다 ....
Stephen R

9

Ruby on Railspresence 에서 영감을 얻은 을 사용 하고 싶습니다 .

$.fn.presence = function () {
    return this.length !== 0 && this;
}

귀하의 예는 다음과 같습니다.

alert($('#notAnElement').presence() || "No object found");

$.fn.exists부울 연산자 if또는를 계속 사용할 수 있기 때문에 제안 된 것보다 우위에 있지만 진실한 결과가 더 유용합니다. 다른 예시:

$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem)
$ul.append('...')

7

내 선호도, 왜 이것이 jQuery에 없는지 잘 모르겠습니다.

$.fn.orElse = function(elseFunction) {
  if (!this.length) {
    elseFunction();
  }
};

이런 식으로 사용 :

$('#notAnElement').each(function () {
  alert("Wrong, it is an element")
}).orElse(function() {
  alert("Yup, it's not an element")
});

또는 CoffeeScript에서 볼 수 있듯이

$('#notAnElement').each ->
  alert "Wrong, it is an element"; return
.orElse ->
  alert "Yup, it's not an element"


0

기본적으로이 작업을 항상 수행 할 수 있습니다. 오류 없이이 작업을 수행하기 위해 jquery 함수 또는 jquery.fn.init 메서드를 래핑하는 데 어려움을 겪었지만 jquery 소스를 간단하게 변경 하여이 작업을 수행 할 수 있습니다. 검색 할 수있는 주변 라인이 포함되어 있습니다. jquery 소스를 검색하는 것이 좋습니다.The jQuery object is actually just the init constructor 'enhanced'

var
  version = "3.3.1",

  // Define a local copy of jQuery
  jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    var result = new jQuery.fn.init( selector, context );
    if ( result.length === 0 ) {
      if (window.console && console.warn && context !== 'failsafe') {
        if (selector != null) {
          console.warn(
            new Error('$(\''+selector+'\') selected nothing. Do $(sel, "failsafe") to silence warning. Context:'+context)
          );
        }
      }
    }
    return result;
  },

  // Support: Android <=4.0 only
  // Make sure we trim BOM and NBSP
  rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

jQuery.fn = jQuery.prototype = {

마지막으로 압축되지 않은 jquery 소스 코드를 얻을 수 있습니다 : http://code.jquery.com/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.