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

Program / 글쓴이

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

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

나는 이것이 가깝다고 생각하지만 #leftmenu가 비어 있는지 테스트하는 코드를 작성하는 방법을 알 수 없습니다. 도움을 주시면 감사하겠습니다!

답변

사용할 수 있습니다 .is().

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

또는 length속성을 테스트하여 발견되었는지 확인할 수 있습니다.

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

비어 있음 은 공백 도 없음을 의미합니다. 공백이있을 가능성이있는 $.trim()경우 콘텐츠의 길이를 사용 하여 확인할 수 있습니다 .

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

답변

비어 있다는 의미에 따라 다릅니다.

텍스트가 없는지 확인하려면 (이렇게하면 자체적으로 비어있는 자식 요소가 허용됨) :

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

하위 요소 또는 텍스트가 없는지 확인하려면 :

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

또는,

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

답변

빈 div를 확인하는 방법에 대한 빠른 데모를 원한다면이 링크를 시도해 보는 것이 좋습니다.

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");
}

답변

이 시도:

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

가장 예쁘지는 않지만 작동합니다. innerHTML (#leftmenu의 내용)이 빈 문자열 (즉, 내부에 아무것도 없음)인지 확인합니다.

답변

제 경우에는 document.ready에서 숨길 여러 요소가있었습니다. 이것은 지금까지 나를 위해 일한 기능 (필터)입니다.

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

또는 .hide () 대신 .remove () 원하는대로.

참고 : 이것은 특히 SharePoint에서 성가신 빈 표 셀을 숨기는 데 사용하는 솔루션입니다 (이 조건 “|| $ (this) .children (“menu “). length”추가).

답변

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