Question

var user = {};
var row = $('<tr></tr>')
   .append($('<td></td>').text(user ? user.call_id : ''))
   .append($('<td></td>').text(user ? user.phone_number : ''))
   .append($('<td></td>').text(user ? user.dialed_number : ''))
   .append($('<td></td>').html(user && user.admin ? '<span class="textgreen">admin</span>' : 'guest'))
   .append($('<td></td>').append(_talking(user ? user.mute : 0)))
   .append($('<td></td>').append($('<span></span>').addClass('timer').text(user ? user.duration : '')))
   .append($('<td></td>').addClass('nowrap').append(_userButtons(user)))
;
alert( row.find('td').size() );    // = does NOT always alert 7, but a smaller value

为什么会这样？

目前，user.dialed_number为undefined，因此缺少的列是第三个。并且重复该列的重要性并不重要，结果在我的项目中总是6。

** 更新 **

这是一个显示问题的简化jsfiddle;它应输出7，但会显示4

Answer 1

AHA！

$('<td></td>').text(undefined)

与

相同

$('<td></td>').text()

根据.text的jquery文档（查看文档的右上角），它返回元素内的文本。然后将该文本（这是一个空字符串）附加到<tr>。这就是<td>未附加

的原因

简单修复：

$('<td></td>').text((true ? undefined : 'false') || '') // oops should  be ||

当第一部分被强制为null时，

将执行一个空字符串（如undefined，0，null，''和0.0）

概念证明：JS Fiddle

Answer 2

如果传递给.text()的任何一个表达式评估为null或undefined，则对.text()的调用将返回TD的文字 - 什么都不是 - 而不是代表TD的jQuery集合。所以你要附加6 TD s并且没有任何内容。

Answer 3

您每次检查user是否存在，但不检查属性是否存在，返回undefined并使您的语句附加td的内容（即没有）而不是td本身。

如果您更改测试以检查属性，则可以： Demo

Answer 4

在你的jsfiddle中，它只显示4的原因是user上的属性没有被定义。

看看这个jsfiddle

也许您的用户属性未定义？

Answer 5

我强烈建议你不要试图非常聪明地单步执行append并查看正在发生的事情，而不是试图在一行中完成所有操作。首先，它可能没有按照您编写的方式执行您认为应该执行的操作 - 每个td都会插入到上一个中！

尝试这种方式：

var row = $('<tr></tr>');
row.append($('<td></td>').text(user ? user.call_id : ''));
row.append($('<td></td>').text(user ? user.phone_number : ''));
row.append($('<td></td>').text(user ? user.dialed_number : ''));
row.append($('<td></td>').html(user && user.admin ? '<span class="textgreen">admin</span>' : 'guest'));
row.append($('<td></td>').append(_talking(user ? user.mute : 0)));
row.append($('<td></td>').append($('<span></span>').addClass('timer').text(user ? user.duration : '')));
row.append($('<td></td>').addClass('nowrap').append(_userButtons(user)));

alert( row.find('td').size() );    // = alerts 6 when it should be 7

此外，当我使用您疯狂的语法运行代码时（在确保所有函数和变量都已定义并存在之后），我得到7。

Answer 6

脚本将单元格附加到上一个单元格，而不是行。 $ .end（）返回链开头的选定对象，即：

    $('tr', this).append($('<td>').text(user ? user.call_id : ''))
                 .end().append($('<td>').text(user ? user.phone_number : ''))
                 .end().append($('<td>').text(user ? user.dialed_number : '')) //etc.

Answer 7

更正后的版本

function _talking() {
    return $('<span>TalkingFn</span>');   
}
function _userButtons() {
    return $('<button>button1</button><button>button2</button>');   
}

var user = {};

var row = $('<tr></tr>')
    .append($('<td></td>').text(user.call_id ? user.call_id : '{calli_id}'))
    .append($('<td></td>').text(user.phone_number ? user.phone_number : '{phone_number}'))
    .append($('<td></td>').text(user.dialed_number ? user.dialed_number : '{dialed_number}'))
   .append($('<td></td>').html(user && user.admin ? '<span class="textgreen">admin</span>' : 'guest'))
   .append($('<td></td>').append(_talking(user.mute ? user.mute : 0)))
   .append($('<td></td>').append($('<span></span>').addClass('timer').text(user.duration ? user.duration : '')))
   .append($('<td></td>').addClass('nowrap').append(_userButtons(user)))
;
alert( row.find('td').size() );    // = alerts 6 when it should be 7

$('#foo > tbody').append(row);

jQuery n次.append（$（''））=少于n列？

7 个答案: