jQuery에 요소가 있는지 정말로 확인해야합니까?

jQuery에 요소가 있는지 정말로 확인해야합니까?

---

최근에 jQuery에 요소가 있는지 올바르게 확인하는 방법에 대한 질문이있었습니다. 여기에서 답을 찾았습니다.

https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

요약해서 말하자면:

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

내가 함께 일하는 한 사람은 올바른 확인 방법은 다음과 같아야한다고 말합니다.

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    // Do something
}

상관이 있나? 성능 또는 지연 시간 측면에서 볼 때 동일한 성능을 발휘합니까?

또한:

$( "#myDiv" ).show();
$( "#myDiv" ).hide();
$( "#myDiv" ).val('');

이러한 유형의 jQuery 함수에서는 존재하지 않으면 if오류가 발생 #myDiv하지 않기 때문에 확인이 필요 하지 않은 것 같습니다 . 맞습니까?

그만한 가치는 jQuery 1.6.4를 사용하고 있습니다.

---

내가 함께 일하는 한 사람은 올바른 확인 방법은 다음과 같아야한다고 말합니다.

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    //do something
}

그는 적어도 부분적으로는 틀렸다 $( "#myDiv" ) &&. jQuery는 $(selector) 항상 정의에 따라 진실한 객체를 반환합니다. 그래서 그 부분은 무의미하며 이유없이 DOM을 다시 쿼리합니다.

성능 또는 지연 시간 측면에서 볼 때 동일한 성능을 발휘합니까?

이유없이 DOM을 다시 쿼리하는 것은 낭비이지만 대부분의 경우 관찰 가능한 방식으로 중요하지 않으며 특히 $("#myDiv")jQuery에 의해 호출로 최적화되는 ID 선택기 getElementById(놀라 울 정도로 빠름)에 대해서는 중요하지 않습니다 . 그래서 한편으로는 예, 낭비적인 추가 작업입니다. 반면에 브라우저는 요즘 너무 빠르기 때문에 더 큰 물고기를 튀길 수 있습니다. 그러나 더 큰 문제인 추가 무의미한 코드 일 것입니다.

일반적인 요점 : jQuery는 set-based 입니다. 즉, 요소가없는 세트에 대한 작업은 작동하지 않습니다. 예 :

$(".foo").addClass("bar");

... .fooDOM에 요소가 없으면 작동하지 않습니다 (오류 아님) .

따라서 length요소와 일치하는지 여부와시기를 확인하십시오 . 신경 쓰지 않고 거기있는 경우에만 작업을 수행하고 싶다면 계속 진행하여 작업을 수행하십시오 (한 가지 중요한 경고 ¹ ).

따라서 기본적으로 세 가지 시나리오가 있습니다.

1. 요소가 있다는 것을 알고 있으므로 검사는 의미가
   없습니다 => 검사 없음

2. 당신은 요소가 될 것입니다 모르겠지만, 당신은 상관하지 않고 그냥에서 작동 할 경우 그들이 거기 없다
   =>에 확인

3. 다른 이유로 요소가 있는지 여부에 관심이 있습니다
   => 확인하십시오

---

¹ 중요한주의 사항 : jQuery 객체 (예 : val()또는 offset()또는 position()등) 가 아닌 다른 것을 반환하는 jQuery 함수를 호출하는 경우 빈 집합에서 호출하면 일반적으로 반환됩니다 undefined(예외는 text(), 반환됩니다 ""[ text()여러 가지면에서 다른 것과 같지 않습니다. 이것은 그들 중 하나입니다]). 따라서 이러한 것들을 순진하게 가정하는 코드를 작성하면 세트가 비어 있어도 예상 한 결과가 반환 될 것입니다.

예를 들면 다음과 같습니다.

if ($(".foo").offset().top > 20)

... .foo요소 가 없으면 오류가 발생 합니다.는 객체가 아닌 offset()을 반환 하기 때문 입니다 undefined.

그러나 이것은 괜찮습니다.

$(".foo").closest(".bar").toggleClass("baz"):

... 아니이있는 경우에도 때문에 .foo, closest()다른 빈의 jQuery 집합을 반환하고 호출 할 toggleClass()그것을하는 것은 어떤 조합입니다.

따라서 jQuery 객체를 반환하지 않는 접근자를 처리 할 때 적어도 하나의 요소를 포함하는 집합을 처리하고 있는지 확실하지 않으면 방어력이 더 필요합니다. 예 :

var offset = $(".foo").offset();
if (offset && offset.top > 20)

다시 말하지만, 대부분의 접근은 (jQuery를 개체를 반환하지 않는)을 포함하여이를 수행 val(), offset(), position(), css(), ...

---

중요하며 두 번 $( "#myDiv" ).length실행되지 않기 때문에 더 좋습니다 document.getElementById('myDiv'). 선택기를 캐싱했다면 훨씬 덜 중요합니다.

var $myDiv = $( "#myDiv" );

if ($myDiv && $myDiv.length) { ... }

그러나, jQuery를 선택자는 항상 반환 뭔가 그래서, "truthy"로 해석됩니다

if ($('#myDiv')) { 

무의미한 수표입니다.

---

One guy I work with says the correct way to check should be:

if ($( "#myDiv" ) && $( "#myDiv" ).length ) {
    //do something 
}

This statement is false. The check of $( "#myDiv" ).length would simply return 0 if it's not found. To be sure, here's a code example with both an id found, and a second id that's not present:

console.log("Count of #myDiv's found: " + $("#myDiv").length);
console.log("Count of #AnotherMyDiv's found: " + $("#AnotherMyDiv").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="myDiv"></div>

---

Depends on what you're doing after the if statement.

Think of it like this. Any jquery selector call returns a jquery object that's basically an array extended with a bunch of different methods. When you call something like $(".my-elements").show() it'll loop over whatever elements $(".my-elements") returned and apply .show() to them then return that same jquery object which is how jquery chains.

If you're just doing chainable things then no, you don't need to do the if check. Because all the subsequent methods will just do a loop equivalent to for (var i=0; i<0; i++){ } which means nothing will happen. If you've got a big chain and you're running it in a big loop that needs to be very performant, you might want to do the if check, but generally it won't really matter from a performance standpoint.

If however, you're doing something that will throw an error or give you a bad result if the element doesn't exist then yes, use the if check. For instance

function addHeight() {
  var height1 = $("#div1").height(),
      height2 = $("#div2").height();

  $("#otherDiv").css({ top: height1 + height2 });
}

If div1 or div2 don't exist otherDiv will get it's top set to NaN which is probably not what you're going for. In this case you would want to verify that both div1 and div2 actually exist, but you still don't really have to check for otherDiv because if it doesn't exist nothing will happen anyway.

---

Is more simple to check if exists and , if we want more info from the object we will not receive null object error.

if (!!$( "#myDiv" )) {
    //do something
}

참고URL : https://stackoverflow.com/questions/38751168/do-i-really-need-to-check-if-an-element-exists-with-jquery