ProgramingTip

jQuery-DOM 요소가 이미 존재하는지 확인

bestdevel 2020. 10. 29. 08:22
반응형

jQuery-DOM 요소가 이미 존재하는지 확인


jQuery와 함께 Ajax를 통해 동적으로 일부 양식 요소를 추가하려고합니다. 동일한 요소를 두 번 만들지 방지하고 싶거나 DOM에 아직 추가하지 않을 경우에만 추가하고 싶습니다.

내 모든 요소에는 고유 한 CSS ID가 있습니다. 예를 들면 다음과 같습니다.

$('#data_1')

요소가 이미 존재하는지 확인하기 위해 다음을 사용하고 있습니다.

if ($('some_element').length == 0) {
    //Add it to the dom
}

그러나 처음으로 매장에서 이미 페이지의 일부였던 요소에 작동합니다.

페이지가로드 된 후 동적으로 생성 된 요소도 어떻게 확인합니까?

조언을 주시면 감사하겠습니다.

감사합니다.


이는 생성시기에 관계없이 모든 요소에 대해 작동합니다.

if($('some_element').length == 0) {
}

ajax 함수에 코드를 작성하면 작동합니다.


올바른 방법으로 요소를 선택하고 확인하기 위해서입니다. 이걸로 해봐

if ($('#some_element').length == 0) {
    //Add it to the dom
}

이 질문은 요소가 존재하는지 여부에 관한 모든 답변은 존재하지 않는지 확인합니다. :) 사소한 차이이지만 언급 할 가치가 있습니다.

를 기반으로 jQuery를 문서 존재를 확인하기 위해 권장되는 방법은있다

if ($( "#myDiv" ).length) {
    // element exists
}

누락 된 요소를 확인하려는 다음 중 하나를 사용할 수 있습니다.

if (!$( "#myDiv" ).length) {
    // element doesn't exist
}

또는

if (0 === $( "#myDiv" ).length) {
    // element doesn't exist
}

두 번째 옵션에서는 ==보다 약간 더 빠른 ===를 사용하여 0을 Yoda 조건으로 왼쪽에 두었습니다 .


항목을 DOM에 추가하는 것을 잊은 것입니다.

여기에서 확인하십시오.


ID가능한 경우 - 사용할 수 있습니다getElementById()

var element =  document.getElementById('elementId');
  if (typeof(element) != 'undefined' && element != null)
  { 
     // exists.
  }

또는 Jquery로 시도하십시오-

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}

(()=> {
    var elem = document.querySelector('.elem');  
    (
        (elem) ? 
        console.log(elem+' was found.') :
        console.log('not found')
    )
})();

존재하는 경우 지정된 요소를 DOM 개체로 확인합니다. JQuery를 사용 $('.elem')하면 발견 된 경우에만 있다는 것을 알려주지 만 어느 것이 아닌지 알려줍니다.


이 경우 현재 DOM에 요소가 있는지 확인하고 싶을 수 있습니다.

요소가 DOM 트리에 존재하는지 (DOM에 첨부되어 있는지) 확인하려면 다음을 사용할 수 있습니다.

var data = $('#data_1'); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}

if ($('#some_element').length === 0) {
    //If exists then do manipulations
}

아무것도 비교하지 말고 이것으로 간단히 확인할 수 있습니다 ...,.

if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}

html () 함수를 다음과 같이 사용할 수도 있습니다.

if($("#url).html()){alert('exist');}

또한 사용에 대해 생각하십시오

$(document).ready(function() {});

왜 여기에 아무도 이것을 생각하지 않았는지 모르겠습니다 (다소 슬프다). 언제 코드를 실행합니까 ??? 처음에? 그런 다음 위에서 언급 한 ready () 함수를 사용하여 코드가 전체 페이지 (모든 dom 요소 포함)가로드 된 후에 실행되도록 할 수 있습니다. 물론 페이지로드 후 dom 요소를 추가하는 코드를 실행하면 쓸모가 없습니다! 그런 다음 해당 함수를 기다렸다가 나중에 코드를 실행하기 만하면됩니다.

참고 URL : https://stackoverflow.com/questions/5538961/jquery-check-if-dom-element-already-exists

반응형