jQuery：在Array中记录元素更改并通过其索引检查其变化情况

Question

每次单击都是一步，并将在.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>")}

非常感谢您的提前帮助。

Answer 1

您的循环迭代（ 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>