jQuery n回.append（$（ '​​</td>'））= n列未満ですか？

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であるため、欠落している列は3番目の列です。どのくらい私はその列を繰り返すかは関係ありません、結果は常に私のプロジェクトで6です。

** UPDATE **

ここでは、問題を示す簡略jsfiddleです。それは、出力すべき7が、それは、私は強くあなたがそれほど賢いとシングルステップ各appendになろうとして停止し、むしろ1行ですべてをやろうとするよりも、何が起こっているかを見ることをお勧め4

Answer 1

があればを取得し、また、

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 

：

この方法を試してみてください.text()に渡される式の1つがnullまたはundefinedと評価された場合、.text()を呼び出すと、TDを表すjQueryコレクションの代わりにTDのテキストが返されます。だからあなたは6 TDと何も追加しないだろう。

Answer 2

を示しています。 1つは、おそらくあなたがそれを書いたやり方でやるべきだと思っていることをしていないでしょう - それぞれtdが前のものの中に挿入されています！私は（すべての関数と変数が定義されていることを確認した後、および存在する）あなたの狂気の構文でも、あなたのコードを実行したときに、私は7

Answer 3

あなたはuserが毎回存在することを確認しますが、プロパティはundefinedを返すと、あなたの文が代わりにtd自体の（何もない）tdの内容を追加することされて存在しているかどうかをチェックしていません。

あなたの代わりにプロパティを確認するためにテストを変更した場合、それが動作します： Demo

Answer 4

AHA！

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

は

.textのためのjQueryのドキュメント（ドキュメントの右上を見て）ごとに、それは要素内のテキストを返し

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

と同じです。次に、そのテキスト（空文字列）を<tr>に追加します。 <td>が追加されていない理由、それはある

簡単な修正：最初の部分は、（ヌルに強制変換できる場合

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

が空の文字列を行います、0、未定義のヌル、「」、および0のような。0）のコンセプトの

証明：あなたのjsfiddleでJS Fiddle

Answer 5

は、それが唯一の4を示している理由は、userのプロパティが定義されていないということです。このjsfiddle

で

ルックは多分あなたのユーザーのプロパティが定義されていませんか？

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);