时间戳

首页 > 解决方案 > jQuery追加方法问题

html - jQuery追加方法问题

问题描述

我有一个简单的 jQuery 问题。我有一个如下所示的 Web 应用程序：应用程序

该页面的 HTML 在这里：

<div id="hwAddition">
                <div id="itemNumber" style="text-decoration: underline; font-size: large;">Item #</div>
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="hwDescription" style="text-decoration: underline;">Description</label>
                        <form:textarea id="hwDescription" type="text"
                            class="form-control short" path="hwDescription"
                            name="hwDescription" placeholder="Description" maxlength="100"
                            rows="2" style="resize: none;" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="hwSerialNumber" style="text-decoration: underline;">Serial
                            #</label>
                        <form:input type="text" class="form-control" path="hwSerialNumber"
                            name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="hwModelNumber" style="text-decoration: underline;">Model
                            #</label>
                        <form:input type="text" class="form-control" path="hwModelNumber"
                            name="hwModelNumber" placeholder="Model #" maxlength="100" />
                    </div>
                </div>
                <hr />
            </div>
        </div>

我的问题在于“项目#”标签。我试图在标记后简单地附加一个值，以便标签显示“Item #1”、“Item #2”等。计数过程正在运行，这里显示了 jQuery：

    var count = 1;
    $(function() {
    
        $("#hwAddition").attr('id', 'hwAddition' + count);
        $("#itemNumber").attr('id', 'itemNumber' + count);
        $("#itemNumber").append(count);
        
    });
    
    $('#hwAdditionButton').click(
            function() {
                
                var clonedObj = $("#hwAddition" + count).clone().attr('id', 'hwAddition' + (count+1));
                
                clonedObj.find("#itemNumber" + count).attr('id', 'itemNumber' + (count+1));
                
                clonedObj.insertAfter("#hwAddition" + count);
                
                $("#itemNumber").append(count);
                
                count++;
            });

但出于某种原因， .append() 方法没有在标签末尾添加任何内容。我做错了什么？

标签： htmljqueryappend

解决方案

在第 5 行和第 12 行，您执行以下操作：

$("#itemNumber").append(count);

您正在搜索没有“+ count”的#itemNumber，如果我理解正确，您已将原始 ID 和克隆 ID 都更改为 itemNumber + count。

此外，附加文本的正确方法是：

$('#itemNumber' + count).append(document.createTextNode(count));

但为什么要使用附加？在你的情况下，你可以这样做：

$('#itemNumber' + count).text("Item #" + count);

推荐阅读