Jquery不在父循环内循环

Posted 2023-05-09

【中文标题】Jquery不在父循环内循环

【英文标题】：Jquery not looping inside parent loop

【发布时间】：2020-10-16 20:06:54

【问题描述】：

我有一个克隆“选择器”的 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 具有类“行形式-行间隔”

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

【问题讨论】：

你是如何调用函数的，如果你执行 cloneMore('.input-group') 或 cloneMore('.form-row.spacer') 它将遍历该 html 内的输入-元素。

请添加一个sn-p（编辑并单击[<>]），请参阅minimal reproducible example。您的问题提到“在父循环内”，但只有一个循环。您的代码显示 cloneMore 但似乎没有被调用。这是一个小提琴（但您应该在问题中提供一个 sn-p），它显示 您的代码可以正常工作 按照呈现方式：jsfiddle.net/tqLywmh9

"在这种情况下，它的 div 类为“row form-row spacer” - 这让我怀疑您正在调用 cloneMore(".row .form-row .spacer") 而不是 cloneMore(".row.form-row.spacer") @ 987654323@

aahh 对不起，我忘了包含调用它的函数！！

我尝试运行它并添加了cloneMore('.form-row.spacer:last', 'form');，并有一个单独的each() 循环newElement.each(function () console.log(this); );，它只经过一次并打印<div class="row form-row spacer"></div>，其中没有元素。我希望它打印 4 次，因为它里面有 4 个元素。怎么了？

【参考方案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>