Question

我目前无法正确选择我的选择器。我想要做的是得到一个具有某个类名的行，并且在一个具有另一个类名的表单中。我的html页面中有两个表单，它们都有一个具有相同类名的行。现在，jQuery选择第一个，然后第二个什么都不做。基本上，我在表单中的表中添加了一行输入，我希望能够在我的两个表单中分别添加该行。

以下是我添加行的代码：

$('input.add').on('click', function(e){
    e.preventDefault();
    var $class = $(this).closest('form').attr('class').split(' ')[0];
    var $clone = $('tr.addRow:last').clone();

    if($clone.children().hasClass('auto_increment'))
    {
        var $nbre = $clone.children().first().text();
        $clone.children().first().text(++$nbre);
    }               
    $clone.wrap('<div>');
    var newRow = $clone.parent().html();

    $('tr.addRow:last').after(newRow);              
});

是的，它是在jQuery加载之后。正如您所看到的，我正在获取表单的类名，但我无法在最后一行中获取选择器。谢谢Ben。

HTML：

<form class="Items next_page_form">
            <fieldset>
                <legend>Items</legend>
                <table class="table_spacing" id="removableData">
                    <tr>
                        <td>ITEM</td>
                        <td>QT&Eacute</td>
                        <td>DESCRIPTION</td>                            
                        <td></td>
                    </tr>
                    <tr class="addRow">
                        <td class="auto_increment">1</td>
                        <td><input type="number" name="quantity"></td>
                        <td><textarea name="description"></textarea></td>                           
                        <td><input type="button" class="removeData" style="margin-left:5px; background-image:url(./images/delete.jpg); width:30px; height:30px; background-size:100%"></td>
                    </tr>
                    <tr>
                        <td colspan="4"><input type="button" class="add" value="Ajouter" style="margin-right:15px; margin-left:10px;"><input type="button" class="remove" value="Enlever"></td>
                    </tr>
                </table>
            </fieldset>
        </form> 
        <form class="envoi next_page_form">
            <fieldset>
                <legend>Envoi</legend>
                <table class="table_spacing">
                    <tr>
                        <td>NO</td>
                        <td>DESTINATAIRE</td>
                        <td>CONTACT</td>
                        <td>COMMENTAIRE</td>
                    </tr>
                    <tr class="addRow">
                        <td class="auto_increment">1</td>
                        <td>
                            <select name="recipient">
                            </select>
                        </td>
                        <td>
                            <select name="contact">
                            </select>
                        </td>
                        <td><textarea name="comments"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="4"><input type="button" class="add" value="Ajouter" style="margin-right:15px; margin-left:10px;"><input type="button" class="remove" value="Enlever"></td>
                    </tr>
                </table>
            </fieldset>
        </form>

Answer 1

首先，您没有第二种形式的<tr>类addRow。其次，您的选择器只需选择当前格式为<tr> 的addRow 。所以，使用jQuery遍历，你会写：

$(this).closest('form').find('tr.addRow:last')

每当您需要当前表单中的最后一个addRow时。

以下是完整的重构代码：

$('input.add').on('click', function(e){
    e.preventDefault();
    var form = $(this).closest('form');
    var $class = form.attr('class').split(' ')[0];
    var $clone = form.find('tr.addRow:last').clone();
    if($clone.children().hasClass('auto_increment'))
    {
        var $nbre = $clone.children().first().text();
        $clone.children().first().text(++$nbre);
    }               
    $clone.wrap('<div>');
    var newRow = $clone.parent().html();
    form.find('tr.addRow:last').after(newRow);              
});

<强> DEMO

Answer 2

您可以简单地定位表父级，然后查找addRow类的最后一个

http://jsfiddle.net/kZZeb/5/

$('input.add').on('click', function(e){
    e.preventDefault();
    var table = $(this).closest('table');
    var $class = table.attr('class').split(' ')[0];
    var $clone = table.find('tr.addRow:last').clone();
    var cloneChildren = $clone.children();

    if(cloneChildren.hasClass('auto_increment'))
    {
        var $nbre = cloneChildren.first().text();
        cloneChildren.first().text(++$nbre);
    }

    $clone.wrap('<div>');
    var newRow = $clone.parent().html();
    table.find('tr.addRow:last').after(newRow);              
});

jQuery从具有特定类的表单中选择行

2 个答案: