jQuery:记录数组中的元素变化，并通过索引检查它是如何变化的

jQuery: Record element changes in Array and check how it was by its index

本文关键字：变化 检查 何变化 索引 数组 记录 元素 jQuery      更新时间：2023-09-26

每次点击都是一步，会在.test中添加一个子div，我将所有元素更改保留在数组step

我希望它看起来像这样：

Array step [0]        = before click, 
Array step [0,01]     = after one click, 
Array step [0,01,012] = aftert two click

但它的工作原理是这样的：

Array step [0]        = before click, 
Array step [0,11]     = after one click, 
Array step [0,11,222] = aftert two click

小提琴示例

.HTML：

<div class="test"></div>
<button type="button" onclick="change()">Count Child Element</button>
<div id="result"></div>

JavaScript：

var step =[];               // step is a record of changes in #test.
step.push($('.test'))        //step[0] is status of .test at very beginning.
$('#result').append(step[0][0].childElementCount+"<br>") // #result showing how many child element in #test
        var change = function (){          
        $('.test').append('<div>t</div>')       //every click will a append <div> in #test
        step.push($('.test'))                    // record this move in step[] 
        console.log('step length',step.length)   // total moves
        for ( var i = 0; i < step.length; i++ ) {
        $('#result').append(step[i][0].childElementCount)
        }
        $('#result').append("<br>")}

非常感谢您提前提供的帮助。

你的循环迭代（i）应该基于childElementCount而不是step数组长度。

我更改了您的代码以使用 step[step.length-1] 获取数组中的最后一个元素，并将 for 循环更改为在遇到最后一个childElementCount时停止。我还显式调用change()，让它为您创建和呈现第一个元素，以避免重复代码。

固定小提琴：http://fiddle.jshell.net/8sbq0y0k/

固定代码：

var step = []; // step is a record of changes in #test.
function change() {
    $('#test').append('<div>t</div>') //every click will a append <div> in #test
    step.push($('#test')) // record this move in step[] 
    console.log('step length', step.length) // total moves
    for (var i = 0; i < step[step.length-1][0].childElementCount; i++) {
        $('#result').append(i.toString())
    }
    $('#result').append("<br/>")
}
change(); // let change do the work for you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
<button type="button" class="btn btn-warning pull-right" onclick="change()">Count Child Element</button>
<div id="result"></div>

相关文章：