jQuery每个循环只适用于第一次

Question

我有两个divs，每个div有另一个div(用于标签(，然后是值。

我希望这些标签也添加到项目的左侧。

https://jsfiddle.net/eavbLgnq/

当前HTML输出：

ID
Name
4343
Alpha
657
Team
Age
Job
23
Teacher
44
Coder

期望结果：

ID
Name
ID 4343
Name Alpha
ID 657
Name Team
Age
Job
Age 23
Job Teacher
Age 44
Job Coder

我得到的：

ID
Name
ID 4343
Name Alpha
ID 657
Name Team
Age
Job
ID 23
Name Teacher
ID 44
Name Coder

Jquery代码：

let pu_cells = []
let table_ = $('.pu')
table_.each(function(){
let this_pu = $(this)
this_pu.find(".pu-row_0 .pu-pk-cell").each(function(){
pu_cells.push($(this).text())
})
this_pu.find('.pu-row:not(.pu-row_0)').each(function(i){
$(this).find('.pu-pk-cell').each(function(j){
$(this).html('<span class="pu-cell-label"> '+pu_cells[j]+'</span> ' + $(this).text())
})
})
})

Answer 1

您永远不会重置pu_cells的值，对于第二个div，它也有第一个单元格值(我的意思是ID,Name(。

所以只需在每个循环中放入let pu_cells = []。

let table_ = $('.pu')
table_.each(function () {
let pu_cells = []
let this_pu = $(this)
this_pu.find(".pu-row_0 .pu-pk-cell").each(function () {
pu_cells.push($(this).text())
})
this_pu.find('.pu-row:not(.pu-row_0)').each(function (i) {
$(this).find('.pu-pk-cell').each(function (j) {
$(this).html('<span class="pu-cell-label"> ' + pu_cells[j] + '</span> ' + $(this).text())
})
})
})

.pu-cell-label {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="pu pu_0">
<div>
<div>
<div class="pu-row pu-row_0">
<div>
<div>
<div class="pu-pk-cell">ID</div>
<div class="pu-pk-cell">Name</div>
</div>
</div>
</div>
<div class="pu-row pu-row_1">
<div>
<div>
<div class="pu-pk-cell">4343</div>
<div class="pu-pk-cell">Alpha</div>
</div>
</div>
</div>
<div class="pu-row pu-row_2">
<div>
<div>
<div class="pu-pk-cell">657</div>
<div class="pu-pk-cell">Team</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pu pu_1">
<div>
<div>
<div class="pu-row pu-row_0">
<div>
<div>
<div class="pu-pk-cell">Age</div>
<div class="pu-pk-cell">Job</div>
</div>
</div>
</div>
<div class="pu-row pu-row_1">
<div>
<div class="pu-da-row">
<div class="pu-pk-cell">23</div>
<div class="pu-pk-cell">Teacher</div>
</div>
</div>
</div>
<div class="pu-row pu-row_2">
<div>
<div>
<div class="pu-pk-cell">44</div>
<div class="pu-pk-cell">Coder</div>
</div>
</div>
</div>
</div>
</div>
</div>