点击按钮添加列表项后，如何用JavaScript/jQuery动态设置标题索引？

我有一个空的UL元素，点击按钮时会向其中添加列表项（li），每个li都包含一个标题（h1）。需要将每个li在列表中的索引设置为h1的内容，例如第二个li的标题为2，第三个为3。我编写了一段jQuery代码，但其中的AddName函数无法正常工作，代码如下：

/*Give all list items a name*/
function AddName() {
    var list = $("#jrn_form_input_list");

    for (var i = 0; i < 5; i++) {
        var index = $("li").index(list[i]);
        var header = "Journey leg: " + index;
        $(list[i]).find("h1").text(header);
    }
};

/*Add journy leg*/
$("#jrn_add_leg_btn").click(function() {
    var html = '';
    html += '<li>';
    html += '<div class="jrn_field">';
    html += '<h1 class="jrn_field_header">"TEST_LEG_NAME"</h1>';
    html += '<label for="jrn_location"><b>Traveling to</b></label>';
    html += '<input type="text" name="jrn_location">';
    html += '</div>';
    html += '</li>';

    $("#jrn_form_input_list").append(html);
    AddName();    
});

你的AddName函数存在几个核心问题：

• list变量获取的是UL容器本身，不是里面的li集合，list[i]的写法完全无效
• 循环固定写死i < 5，无法适配动态添加的li数量
• $("li").index(list[i])的索引计算逻辑错误，因为list[i]是UL元素，不是li节点

下面提供两种可行的修正方案：

方案一：遍历所有li统一更新标题 #

适合需要批量更新所有li标题的场景：

/* 给所有列表项设置标题 */
function AddName() {
    // 获取UL下的所有li元素集合
    var items = $("#jrn_form_input_list li");
    // 遍历每个li，index从0开始，加1后对应你要的序号
    items.each(function(index) {
        var headerText = "Journey leg: " + (index + 1);
        $(this).find(".jrn_field_header").text(headerText);
    });
};

/* 添加行程项 */
$("#jrn_add_leg_btn").click(function() {
    var html = '';
    html += '<li>';
    html += '<div class="jrn_field">';
    html += '<h1 class="jrn_field_header"></h1>';
    html += '<label for="jrn_location"><b>Traveling to</b></label>';
    html += '<input type="text" name="jrn_location">';
    html += '</div>';
    html += '</li>';

    $("#jrn_form_input_list").append(html);
    AddName();    
});

方案二：仅给新添加的li设置标题（更高效） #

如果不需要重新更新旧li的标题，直接在添加时计算序号即可：

/* 添加行程项 */
$("#jrn_add_leg_btn").click(function() {
    // 获取当前已有的li数量，新项的序号就是数量+1
    var newIndex = $("#jrn_form_input_list li").length + 1;
    var headerText = "Journey leg: " + newIndex;

    var html = '';
    html += '<li>';
    html += '<div class="jrn_field">';
    html += `<h1 class="jrn_field_header">${headerText}</h1>`;
    html += '<label for="jrn_location"><b>Traveling to</b></label>';
    html += '<input type="text" name="jrn_location">';
    html += '</div>';
    html += '</li>';

    $("#jrn_form_input_list").append(html);
    // 无需再调用AddName，直接完成标题设置
});

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