jQuery는 "is : empty"에 대해 true를 반환합니다. 추가 된 HTML을 확인하십시오.

사용자가 내 사이트에서 그림을 업로드 할 수 있습니다.이 시점에서 jQuery는 append()를 사용하여 페이지에 삽입합니다. 추가 한 후에 거기에 무언가가 있는지를 판단 할 수 있어야하지만 jQuery의 "is : empty"검사는 내용이 추가 되었음에도 불구하고 true를 반환합니다. 페이지를 다시로드하면 "is : empty"검사가 false를 반환합니다. jQuery가 추가 할 때 DOM을 업데이트하지 못하고 "is : empty"를 실행할 때 업데이트되지 않은 모델을 확인하는 것 같습니다. 이 주위에 방법이 있는지 아는 사람 있습니까?jQuery는 "is : empty"에 대해 true를 반환합니다. 추가 된 HTML을 확인하십시오.

편집 : 코멘트에서

추가 -

if ($('#issueimage1'+issueid).is(':empty')) { 
    $('#issueimage1'+issueid).append(responseText); 
} 
elseif ($('#issueimage2'+issueid).is(':empty')) { 
    $('#issueimage2'+issueid).append(responseText); 
} 
else { 
    $('#issueimage3'+issueid).append(responseText); 
}

아이디어는 사용자가 세 장의 사진을 추가 할 수 있습니다. 각 그림에 대한 전용 요소가 있습니다. 각 요소를 순차적으로 검사하여 삽입 할 위치를 확인합니다. 이것은 처음에는 잘 작동합니다 (페이지로드시 두 장의 사진이 있으면 세 번째 슬롯에 삽입됩니다). 페이지를 새로 고치지 않고 두 개의 이미지를 추가 할 때 당신이 "is:empty"를 말하는 당신이

$([selector]).is(":empty")

을 의미 할 때,

출처

2009-09-03 Jacob

코드를 게시 하시겠습니까? –

명확성을 위해 $ (selector) .is (': empty') 구문을 사용하고 있습니다. 너 수표? – RwwL

if ($ ('# issueimage1'+ issueid) .is (': empty')) { $ ('# issueimage1'+ issueid).추가 (응답 텍스트); } else if ($ ('# issueimage2'+ issueid) .is (': empty')) { $ ('# issueimage2'+ issueid) .append (responseText); } else { $ ('# issueimage3'+ issueid) .append (responseText); } 아이디어는 사용자가 최대 3 장의 사진을 추가 할 수 있다는 것입니다. 각 그림에 대한 전용 요소가 있습니다. 각 요소를 순차적으로 검사하여 삽입 할 위치를 확인합니다. 이것은 처음에는 잘 작동합니다 (페이지로드시 두 장의 사진이 있으면 세 번째 슬롯에 삽입됩니다). 페이지를 새로 고치지 않고 두 이미지를 추가하면 오류가 발생합니다. – Jacob

실패? 이 Working Demo

$(function() { 
    $("#empty").click(function() { 
     alert($('#myDiv').is(':empty')); 
    }); 

    $("#append").click(function() { 
     $('#myDiv').append('<span>Appended!</span>'); 
    }); 
}); 

<!-- not all html shown, for brevity --> 

<body> 
    <div id="myDiv"></div><br/> 
    <button id="empty">Check if div empty</button> 
    <button id="append">Append to div</button> 
</body>

편집에서 입증 된 바와 같이

그것은 나를 위해 확인 일하고 :

:empty를 사용의 문제는 또한 요소가 텍스트 노드뿐만 아니라 요소가 포함되어 있는지 여부를 평가한다는 것입니다 텍스트 노드를 포함하는 경우 비어있는 것으로 간주되지 않습니다. 나는 이것이 당신이 원하는 행동이라고 생각하지 않으므로 을 자식 요소의 래핑 된 집합에 사용하여 <td>에 자식 요소 노드가 있는지 확인해야합니다. 길이가 0 인 경우이 목적으로 비어있는 것으로 간주됩니다 (.length을 확인하는 것은 .length을 직접 호출하는 것이 약간 더 빠름을 제외하고 .length을 호출하는 .size()을 사용하는 것과 같습니다).

그래서, 여기 당신에게 예를 보여주기 위해 Working Demo의 우리가 this

$('td', this).each(function() { 
    // this inside the function will reference the <td> 
    // get any child elements and check the length 
    if ($('*',this).length === 0) { 
     // this <td> is empty! 
     // break out of the each loop 
     return false; 
    } 
});

참조하는 <tr>이의 말을 보자. /을 URL에 추가하여 코드를 확인하고 재생하십시오.

jQuery를 코드

<div> 
    <div class="imagePicker"> 
     <input type="radio" name="imagePicker" /> 
     <img src="http://www.website-designs.com/images/resources_1/icons/Dead.gif" alt="image" /> 
    </div> 
    <div class="imagePicker" > 
     <input type="radio" name="imagePicker" /> 
     <img src="http://www.website-designs.com/images/resources_1/icons/Dead2.gif" alt="image" /> 
    </div> 
    <div class="imagePicker" > 
     <input type="radio" name="imagePicker" /> 
     <img src="http://www.website-designs.com/images/resources_1/icons/Diablo.gif" alt="image" /> 
    </div> 
    <div class="imagePicker" > 
     <input type="radio" name="imagePicker" /> 
     <img src="http://www.website-designs.com/images/resources_1/icons/Ckicken.gif" alt="image" /> 
    </div> 
    </div> 
    <br/><br/> 
    <span id="comment"></span> 
    <br/> 
    <table style="margin:10px;"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Image 1</th> 
     <th>Image 2</th> 
     <th>Image 3</th>   
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td><a href="#" class="select">Select</a></td> 
     <td></td> 
     <td></td> 
     <td></td>   
    </tr> 
    <tr> 
     <td><a href="#" class="select">Select</a></td> 
     <td></td> 
     <td></td> 
     <td></td>   
    </tr> 
    <tr> 
     <td><a href="#" class="select">Select</a></td> 
     <td></td> 
     <td></td> 
     <td></td>   
    </tr> 
    </tbody> 
    </table>

출처

2009-09-03 22:19:47

예, 구문을 사용하고 있습니다. pageload 할 때 생성 된 원본 HTML에서 작동 할 때 정확한 코드가 false (정답)를 반환하므로 코드가 정확하다고 생각합니다. 그러나이 코드가 jQuery에 의해 추가 된 HTML에 대해 실행되면 true를 반환합니다. – Jacob

@Jacob - 다른 곳에 문제가있을 수 있으므로 코드를 게시해야합니다. –

+1 라이브 데모 추가하기 –

참고

$('a.select').click(function(e) { 
    e.preventDefault(); 
    var anchor = $(this); 
    var radio; 

    $('input:radio[name="imagePicker"]').each(function() { 
    if (this.checked === true) { 
     radio = $(this); 
     return false; 
    } 
    }); 

    if (radio === undefined) { 
    $('#comment').text('You must select an image').css('color','red'); 
    } 
    else { 
    var checked = false; 
    var tds = anchor.closest('tr').children('td'); 
    tds.each(function(i, val) { 
     if ($('*', this).length === 0) { 
     radio.next().clone(true).appendTo(this); 
     $('#comment').text('Appended to td Image ' + i).css('color','green'); 
     checked = true; 
     return false; 
     } 
    });  
    if (!checked) { 
     $('#comment').text('No empty td in this row').css('color','red'); 
    } 
    } 
}); 

$('input:radio[name="imagePicker"]').click(function() { 
    $('#comment').text(''); 
});

HTML (I 그래서 아마 어느 정도까지 정돈 할 수 서둘러 쓴), 공백이 발생합니다 : 거짓으로 빈 :

를

<div id="first"></div> 

<div id="second"> </div> 

console.log($('#first').is(':empty')); //true 
console.log($('#second').is(':empty')); //false

출처

2011-06-23 12:06:12

해결책은 $ ('[selector]') .html()입니다. trim() == ''// True = 비어 있음; 거짓 = 비어 있지 않음 – ticallian

jQuery는 "is : empty"에 대해 true를 반환합니다. 추가 된 HTML을 확인하십시오.

답변

관련 문제