javascript - jQuery:记录数组中元素的变化并通过索引检查它的变化

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

fiddle example

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()，让它为您完成创建和渲染第一个元素的工作，以避免重复代码。

固定 fiddle :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>