.html() 中的 jquery javascript 奇怪行为答案

【问题标题】：jquery javascript strange behavior in .html().html() 中的 jquery javascript 奇怪行为
【发布时间】：2010-11-23 16:24:20
【问题描述】：

我有下一个简单的 html：<td id="comment_td"> </td>。 td 中有两个空格。我像这样检查 td html：

if (!$('#comment_td').html()) {
    $('#comment_td').html('No Comments');
}

但它只在 IE 中有效）））在 Firefox 中这个条件不执行。你能帮帮我吗？

【问题讨论】：

【解决方案1】：

如果您想查看是否所有内容都为空，您可能需要删除其中的所有空格。

if($('#comment_td').html().trim().length == 0) {
    $('#comment_td').html('No Comments');
}

有些浏览器会删除重复的空格，如果没有其他内容，甚至可能会删除两个标签之间的所有空格。

如果你想检查是否有空格，你应该使用&nbsp;字符输出空格，像这样：

<td id="comment_td">&nbsp;&nbsp;</td>

【讨论】：

【解决方案2】：

尝试以下方法：

var Comment = $('#comment_td');
if(Comment.html().trim().length == 0)
{
    Comment.html('No Comments');
}

通过检查修剪后的长度，您特别声明要删除空格，因为某些浏览器（如 IE）会删除空格，而其他浏览器则不会，所以在 Firefox 中，因为元素中存在空格，它实际上存在。

如果您的 cmets_td 中的 cmets 在容器中，那么您还可以检查子项，例如：

<td id="comment_td">
   <p class="comment">A comment</p>
   <p class="comment">A comment</p>
</td>

然后在 jQuery 中你可以这样做：

if($("#comments_td > p.comment").size() == 0)
{
   //No Comments.
}

【讨论】：

【解决方案3】：

if ($('#comment_td').html().trim() == "") {
    $('#comment_td').html('No Comments');
}

【讨论】：

【解决方案4】：

var empty = $.trim( $('#comment_td').html() ).length == 0;

if ( empty ) {
  // do whatever
}

【讨论】：

【解决方案5】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

在 Firefox 下以不同方式呈现以上两者。

这可能与您在HTML 文档的第一行、HTML 标记之前定义的!DOCTYPE 有关。阅读更多关于这些Mysterious Gaps 的信息。

【讨论】：