programing

if 문을 사용하여 div가 비어 있는지 확인

goodsources 2023. 8. 14. 22:50
반응형

if 문을 사용하여 div가 비어 있는지 확인

나는 만약 별도의 div가 비어 있다면 특정 div를 제거하려고 합니다.제가 사용하는 것은 다음과 같습니다.

$(document).ready(function () {
    if ('#leftmenu:empty') {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({ 'right': '0', 'position': 'absolute' });
        $('#PageContent').css({ 'top': '30px', 'position': 'relative' });
    }
});

가까운 것 같은데 #leftmenu가 비어있는 테스트할 코드를 어떻게 작성해야 할지 모르겠습니다.어떤 도움이든 감사합니다!

사용할 수 있습니다.

if( $('#leftmenu').is(':empty') ) {
    // ...

아니면 부동산을 테스트하여 발견되었는지 확인할 수도 있습니다.

if( $('#leftmenu:empty').length ) {
    // ...

비어 있으면 공백도 없다는 을 의미합니다.공백이 있을 가능성이 있는 경우 내용의 길이를 사용하여 확인할 수 있습니다.

if( !$.trim( $('#leftmenu').html() ).length ) {
    // ...

그것은 당신이 공허하다는 것을 의미하는 것에 달려 있습니다.

텍스트가 없는지 확인하는 방법(이를 통해 비어 있는 하위 요소를 사용할 수

if ($('#leftmenu').text() == '')

하위 요소 또는 텍스트가 없는지 확인하는 방법

if ($('#leftmenu').contents().length == 0)

아니면.

if ($('#leftmenu').html() == '')

빈 디브를 확인하는 간단한 데모를 원한다면 다음 링크를 사용해 보는 것이 좋습니다.

http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/


다음은 몇 가지 간단한 예입니다.

CSS 사용

만약 당신의 div가 공백 없이 비어있다면, 당신은 CSS를 사용할 수 있습니다:

.someDiv:empty {
    display: none;
}

안타깝게도 이전 형제 요소를 선택하는 CSS 선택기가 없습니다.다음 형제 요소에만 해당됩니다.x ~ y

.someDiv:empty ~ .anotherDiv {
    display: none;
}

jQuery 사용

text() 함수를 사용하여 요소의 텍스트 길이 확인

if ( $('#leftmenu').text().length == 0 ) {
    // length of text is 0
}

요소 내부에 자식 태그가 있는지 확인합니다.

if ( $('#leftmenu').children().length == 0 ) {
    // div has no other tags inside it
}

공백이 있는 경우 빈 요소 확인합니다.

if ( $.trim( $('.someDiv').text() ).length == 0 ) {
    // white-space trimmed, div is empty
}

다음과 같은 jQuery 기능을 확장할 수 있습니다.

확장:

(function($){
    jQuery.fn.checkEmpty = function() {
       return !$.trim(this.html()).length;
    };
}(jQuery));

사용:

<div id="selector"></div>

if($("#selector").checkEmpty()){
     console.log("Empty");
}else{
     console.log("Not Empty");
}

또한 다음을 사용할 수 있습니다.


    if (! $('#leftmenu').children().length > 0 ) {
         // do something : e.x : remove a specific div
    }

당신에게 효과가 있을 것 같아요!

사용해 보십시오.

$(document).ready(function() {
    if ($('#leftmenu').html() === "") {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({'right' : '0', 'position' : 'absolute'});
        $('#PageContent').css({'top' : '30px', 'position' : 'relative'});
    }
});

그것이 가장 예쁘지는 않지만, 효과가 있을 겁니다.내부가HTML(#leftmenu의 내용)은 빈 문자열입니다(즉, 내부에 아무것도 없음).

저는 오늘 이런 일을 겪었지만, 수락된 답변은 저에게 효과가 없었습니다.제가 한 방법은 이렇습니다.

if( $('#div-id *').length === 0 ) {
    // your code here...
}

나의 솔루션은 div 내부에 요소가 있는지 확인하기 때문에 텍스트만 있으면 div를 빈 상태로 표시합니다.

저의 경우 document.ready에 숨길 요소가 여러 개 있었습니다.지금까지 저에게 적용된 기능(필터)은 다음과 같습니다.

$('[name="_invisibleIfEmpty"]').filter(function () {
    return $.trim($(this).html()).length == 0;
}).hide();

또는 원하는 대로 .hide(숨기기) 대신 .remove()를 선택합니다.

참고: 특히 이것은 SharePoint에서 성가신 빈 테이블 셀을 숨기기 위해 사용하는 솔루션입니다(이 조건과 더불어 "|$(이것).children("), length("길이").

if (typeof($('#container .prateleira')[0]) === 'undefined') {
    $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none');
}
if($('#leftmenu').val() == "") {
   // statement
}

언급URL : https://stackoverflow.com/questions/4665466/using-an-if-statement-to-check-if-a-div-is-empty

반응형