我正在創建一個行陣列，并想稍后使用
如果我將它們附加回來，它可以作業，但我想替換 html，但它沒有，很好奇為什么。另外，如果我只想附加 50 行，我會怎么做？
作品
var removedRows = [];
$('#statsBody tr[role="row"]').each(function (i) {
removedRows.push($(this));
});
$.each(removedRows, function(i, v) {
$('#statsBody').append(v);
});
不起作用，只回傳一行
var removedRows = [];
$('#statsBody tr[role="row"]').each(function (i) {
removedRows.push($(this));
});
$.each(removedRows, function(i, v) {
$('#statsBody').html(v);
});
如果我清除 html 然后附加它可以正常作業，但為什么使用 html vs append here 不起作用
$('#statsBody').html('');
$.each(removedRows, function(i, v) {
$('#statsBody').append(v);
});
uj5u.com熱心網友回復：
.html()總是替換整個內容。
這是一樣的$(".destination").empty().append(new_element)
在.append() 添加內容時，它不會替換現有內容。
每次呼叫.html()它都會先清除。
所以給定這段代碼：
$(".out").html($(".source")[0]);
$(".out").html($(".source")[1]);
$(".out").html($(".source")[2]);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='source'>1</div>
<div class='source'>2</div>
<div class='source'>3</div>
<hr/>
<div class='out'></div>只有最后一個條目$(".source")[2]會存在，因為最后一個會覆寫前兩個。
這就是你的回圈/$.each 中發生的事情 - 每個回圈都會從前一個回圈的 .html 中清空目的地，只留下最后一個。
要僅附加 50 個，您可以添加為基本計數器：
let i = 0;
$('#statsBody').html('');
$.each(removedRows, function(i, v) {
i ;
if (i<50)
$('#statsBody').append(v);
});
或者您可以使用基本for回圈：
for (let i=0; i<50; i) {
$("#statsBody").append(removedRows[i])
}
或者您可以在追加之前計算有多少（如果不是一次性追加）（不推薦，因為每個回圈都計算它們效率很低）。
如果您不想超過 50（即失去 51 ），那么您可以使用 splice()
removedRows.splice(0, 49);
.length =在陣列上使用類似于 .splice：
var x = [1, 2, 3];
x.length = 2;
console.log(x);如果您想保留它們，但一次只添加 50個（即稍后再添加 50 個），那么您可以使用.slice()
var rows = $(".source");
$(".body").empty();
var page = 0;
setTimeout(() => {
$(".body").append(rows.slice(page, 2));
page = 2;
}, 500);
setTimeout(() => {
$(".body").append(rows.slice(page));
}, 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='body'>
<div class='source'>1</div>
<div class='source'>2</div>
<div class='source'>3</div>
</div>uj5u.com熱心網友回復：
v 包含物件資料。. html()期待 html 字串。
更新代碼：
var removedRows = [];
$('#statsBody tr[role="row"]').each(function (i) {
removedRows.push($(this));
});
$.each(removedRows, function(i, v) {
$('#statsBody').html(v.outerHTML());
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439735.html
標籤：jQuery