jquery每个循环仅第一次工作

s3fp2yjn  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(226)

我有两个 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())
        })
      })
})
fzwojiic

fzwojiic1#

您永远不会重置的值 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>

相关问题