Jquery不在父循环内循环

Question

我有一个克隆“选择器”的 jquery 代码，其中它是许多其他元素的父级。

EDIT：我添加了调用“cloneMore”的函数。它应该在用户单击行内的按钮并在其下方创建另一行时调用。

EDIT 2：我添加了<tr> 所属的表。我试图在没有<tr> <td> 标签的情况下运行它，并且该功能有效！但遗憾的是它从 html 表中删除了它。为什么会这样？

jquery sn-p

$(document).on('click', '.add-form-row', function(e){
        alert("Button Click!");
        e.preventDefault();
        cloneMore('.form-row.spacer:last', 'form');
        return false;

function cloneMore(selector, prefix) {
        var newElement = $(selector).clone(true);

        newElement.find('input[type=text]').each(function() { //loops through the textfields
            console.log("print1");
        });
        
        newElement.each(function () {
            console.log("print2");
        });

html代码

    <div class="display_table">
    <table class="table table-hover table-striped">
        <thead class="thead-dark">
            <tr class="tablerow">
                <th scope="col">Item</th>
                <th scope="col">Item Description</th>
                <th scope="col">Quantity</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            {{ formset.management_form }}
            {% for form in formset %}
            <div class="row form-row spacer">
                <tr scope="row">
                    <div class="input-group">
                        <td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
                        <td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
                        <td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
                        <div class="input-group-append"><td><button class="btn btn-success add-form-row">+</button></td></div>
                    </div>
                </tr>
            </div>
            {% endfor %}
        </tbody>
    </table>
</div>

但是，它甚至一次都没有通过循环，而且我在控制台中也没有得到“打印”。我确定父项中有一个文本字段。在这种情况下，它的 div 具有类“行形式-行间隔”

我的语法有问题吗？我在某处看到他们通过选择器获取父级，但在我的情况下，我将它放在一个变量中。有什么问题或解决方法吗？

Answer 1

我想我有点想通了。即使没有引用<td> 和<tr> 标签，我也试图选择<input> 标签。所以 jquery 不知道我要选择什么。因此，在我对整个表和 jquery 脚本进行了一些更改之后，它就像我预期的那样工作。但是，任何有关如何改进此代码的建议都将不胜感激！我把它贴出来以防有人需要。

另外，我忘了把这个Stack Overflow answer 归功于 sn-ps。

html代码

<table class="table table-hover table-striped" id="part_table">
        <thead class="thead-dark">
            <tr class="tablehead">
                <th scope="col">Item</th>
                <th scope="col">Item Description</th>
                <th scope="col">Quantity</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            {{ formset.management_form }}
            {% for form in formset %}
            <div class="row form-row">
                <tr class="tablerow">
                    <td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
                    <td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
                    <td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
                    <td><button class="btn btn-success add-form-row">+</button></td>
                </tr>
            </div>
            {% endfor %}
        </tbody>
    </table>

jquery sn-p

<script type="text/javascript">
    function cloneMore(prefix) { 
        var lastrowtbl = $('#part_table tr.tablerow:last').clone(true); 

        var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
        var currentnum = total - 1

        lastrowtbl.find('input[type=text]').each(function (i, el) {
            console.log(this);
            var name = $(this).attr('name');
            if(name) {
                name = name.replace('-' + currentnum + '-', '-' + total + '-');
                var id = 'id_' + name;
                $(this).attr({'name' : name, 'id' : id}).val('').removeAttr('checked');
            }
        });

        total++;
        $('#id_' + prefix + '_TOTAL_FORMS').val(total);
        $('#part_table tr.tablerow:last').after(lastrowtbl);

        var conditionRow = $('#part_table tr.tablerow:not(:last)');
        conditionRow.find('.btn.add-form-row')
        .removeClass('btn-success').addClass('btn-danger')
        .removeClass('add-form-row').addClass('remove-form-row')
        .html('-');
        return false;
    }

    $(document).on('click', '.add-form-row', function(e){
        alert("Button Click!");
        e.preventDefault();
        cloneMore('form');
        return false;
    });
    
</script>