javascript - 当列表中有三个对象时，jQuery.each 会迭代列表两次。 JavaScript

Question

plan_unit_list_items 里面有三个对象，但是我的 ul 后面只附加了两个 li。谁能告诉我为什么会这样？

var plan_unit_list_items = {!planUnitList}; // APEX METHOD
var openPlanUnitList = function (unitdiv) {
    jQuery('div.plan_unit_dropdown').remove();
    var plan_unit_dr = jQuery('<div>')
        .addClass('plan_unit_dropdown')
        .append('<ul>');
    jQuery.each(plan_unit_list_items,

    function (idx, val) {
        jQuery('.plan_unit_dropdown ul').append(
        jQuery('<li>')
            .addClass('plan_unit_list_items')
            .text(val.Name))
        plan_unit_dr.appendTo(unitdiv);
    })
}

(如果“迭代”是问题中的错误术语，我深表歉意)

Answer 1

如果我理解你的代码，看起来你正在创建一个ul，然后尝试将li附加到它，但你正在使用以下选择器来选择当第一次迭代之后尚未添加到 DOM 时，来自 DOM 的 ul:

jQuery('.plan_unit_dropdown ul')

因此在第一次迭代时，不会发生附加操作。既然您已经可以访问新创建的 ul，为什么不直接附加到它而不是重新选择它呢？

var openPlanUnitList = function (unitdiv) {
    jQuery('div.plan_unit_dropdown').remove();
    var plan_unit_ul = jQuery('<ul>'),
        plan_unit_dr = jQuery('<div>')
            .addClass('plan_unit_dropdown')
            .append(plan_unit_ul);

    plan_unit_dr.appendTo(unitdiv);

    jQuery.each(plan_unit_list_items, function (idx, val) {
        plan_unit_ul.append(jQuery('<li>')
                              .addClass('plan_unit_list_items')
                              .text(val.Name));
    });
};