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

Why is that so?

At the moment, user.dialed_number is undefined, therefore the missing column is the third one. And it doesn’t matter how much I repeat that column, the result is always 6 in my project.

** UPDATE **

Here is a simplified jsfiddle showing the problem; it should output 7, but it shows 4

Answer 1

If any one of the expressions passed to .text() evaluates to null or undefined, the call to .text() will return the text of the TD – which is nothing – instead of the jQuery collection representing the TD. So you’d append 6 TDs and a nothing.