用户可以在我的网站上传图片,然后jQuery将其插入带有append()的页面.在追加之后,我需要能够确定是否存在某些内容,但jQuery的"is:empty"检查返回true,尽管内容已被追加.如果我重新加载页面,"is:empty"检查将返回false.似乎jQuery在追加时无法更新DOM,然后在运行"is:empty"时检查其未更新的模型.有人知道有没有办法解决这个问题？
编辑:
从评论中添加 -
if ($('#issueimage1'+issueid).is(':empty')) {
$('#issueimage1'+issueid).append(responseText);
}
elseif ($('#issueimage2'+issueid).is(':empty')) {
$('#issueimage2'+issueid).append(responseText);
}
else {
$('#issueimage3'+issueid).append(responseText);
}
这个想法是用户可以添加最多三张图片.我为每张照片都有一个专用元素.它按顺序检查每个元素以查看插入位置.这最初工作正常(如果在页面加载时,有两张图片,它将插入第三个插槽).在不刷新页面的情况下添加两个图像时,它会失败
Rus*_*Cam 24
当你说" is:empty"的意思是
$([selector]).is(":empty")
？
对我来说这很好,正如本工作演示所示
$(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是它还评估元素是否包含文本节点以及元素节点,如果它包含文本节点,则不认为是空的.我不认为这是你想要的行为,所以我们可以.length在a的子元素的包装集上使用,<td>以确定它是否有任何子元素节点; 如果长度为0,则为此目的将其视为空(检查.length与使用.size()哪些调用相同.length,但.length直接检查会稍微快一些).
所以,假设我们有一个<tr>引用的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;
}
});
这是一个工作演示,向您展示一个例子.添加/编辑 URL以查看代码并使用它.
jQuery代码(我写的很匆忙所以可能有点整理)
$('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
<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>
小智 5
仅供参考,任何空白都会导致:空虚为假:
<div id="first"></div>
<div id="second"> </div>
console.log($('#first').is(':empty')); //true
console.log($('#second').is(':empty')); //false