jQuery each循环仅生成最后一项数据，请求修正以生成完整数组

问题场景 #

你当前的代码在点击链接后，只能收集到最后一个列表的复选框数据，无法获取所有子项的信息。比如选中所有复选框后，得到的结果是：

[{"id":"opt3062581","issuedtutes":["1","2"]}]

但期望的结果应该包含所有三个子项的数据：

[{"id":"opt471821","issuedtutes":["1","2"]},{"id":"opt1215754","issuedtutes":["1","2"]},{"id":"opt3062581","issuedtutes":["1","2"]}]

原代码展示 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="refno" data-refindex="1" data-ref="1105898">1105898</a>
<ul>
    <li>
        <div>Title 1</div>
        <ul class="datarefindex_1" data-subjid="opt471821">
            <li>
                <label class="tutebtn" for="1_opt471821_1">
                    <input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
            </li>
            <li>
                <label class="tutebtn" for="1_opt471821_2">
                    <input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
            </li>
        </ul>
    </li>
    <li>
        <div>Title 2</div>
        <ul class="datarefindex_1" data-subjid="opt1215754">
            <li>
                <label class="tutebtn" for="1_opt1215754_1">
                    <input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
            </li>
            <li>
                <label class="tutebtn" for="1_opt1215754_2">
                    <input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
            </li>
        </ul>
    </li>
    <li>
        <div>Title 3</div>
        <ul class="datarefindex_1" data-subjid="opt3062581">
            <li>
                <label class="tutebtn" for="1_opt3062581_1">
                    <input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
            </li>
            <li>
                <label class="tutebtn" for="1_opt3062581_2">
                    <input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
            </li>
        </ul>
    </li>
</ul>
<div id="responsecontainer"></div>

JavaScript代码

jQuery(document).on("click", ".refno", function() {
    var ref = jQuery(this).data("ref");
    var refindex = jQuery(this).data("refindex");
    var i = 0;
    var tutelists = [];
    var tutearray = {}; // 问题核心所在
    jQuery('.datarefindex_' + refindex).each(function() {
        var subjid = jQuery(this).data("subjid");
        i++;
        tutearray["id"] = subjid;
        tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
            return this.value;
        }).get();
    });
    tutelists.push(tutearray);
    var tutelists = JSON.stringify(tutelists);
    jQuery("#responsecontainer").html(tutelists);
});

问题原因 #

你把tutearray对象定义在了each循环的外面，这意味着整个循环过程中你一直在修改同一个对象的属性，而不是创建新的对象。数组tutelists中存储的是这个对象的引用，所以最后数组里的所有元素其实都是同一个对象，自然只会显示最后一次修改的结果。

解决方案 #

把tutearray的创建移到each循环的内部，这样每次循环都会生成一个新的对象，每个对象对应一个子项的数据，再把这些新对象push到数组里，就能得到所有子项的信息了。同时优化了变量名，避免重复定义的潜在问题。

修改后的JavaScript代码：

jQuery(document).on("click", ".refno", function() {
    var ref = jQuery(this).data("ref");
    var refindex = jQuery(this).data("refindex");
    var i = 0;
    var tutelists = [];
    
    jQuery('.datarefindex_' + refindex).each(function() {
        var tutearray = {}; // 每次循环新建一个独立对象
        var subjid = jQuery(this).data("subjid");
        i++;
        tutearray["id"] = subjid;
        tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
            return this.value;
        }).get();
        tutelists.push(tutearray); // 将新对象推入数组
    });
    
    var tutelistsJson = JSON.stringify(tutelists);
    jQuery("#responsecontainer").html(tutelistsJson);
});

现在点击链接后，就能得到你期望的包含所有子项数据的数组了。

内容的提问来源于stack exchange，提问作者Sid