javascript - jQuery 丢失 div 换行，+ 修改元素的问题

Question

我正在构建一个表单，用户可以在其中动态添加或删除行。我已经构建了 jQuery 函数来完成此任务，但是我在这个过程中丢失了一些元素，而且我不明白为什么。

HTML 代码段

<div class="options" id="options">
        <div class="item1" id="item1">
            <div class="left_wrap">
                <ul>
                    <li class="col_id b-bottom"></li>
                    <li class="hazard_header"><h3>Hazard</h3></li>
                    <li class="hazard_input b-bottom"></li>
                    <li class="con_header b-bottom"><h3>Controls</h3></li>
                    <li class="cat_header"><h3>Consequence Category</h3></li>
                    <li class="cat_options"></li>
                </ul>
            </div>
            <div class="right_wrap">
            </div>
            <div class="controls">
                <div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
                <div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
            </div>
        </div><!-- End Item -->
    </div> <!-- End Options Wrap -->

jQuery

var count = 1;
var wrap;
var item;

function addRow(){
    count++;
    var $newElement = $(item);
        $newElement.find("li.col_id").text(count);
        // Doesn't work
        $newElement.find(".item1").removeClass("item1").addClass("item"+count);
        // Remove ID item1 make it (item+count)
        // Change deleteRow('#item1') to deleteRow('#item2')
        $($newElement).appendTo(".options");

    };

$(document).ready(function(){
    wrap = $(".options").html();
    item = wrap;
    id = $("div.item1");
    id.find("li.col_id").text("1");
});

我已经注释掉了 addRow 中遇到问题的部分。有线的事情是，当我在 .ready 中显示我的(项目)时，它显示了wrapp()，但是当我在 addRow 中执行它时，它不再显示它。

我已经在这个问题上坚持了几个小时，并尝试了几种不同的方法来做到这一点，但我总是表现不佳。

当我单击“添加行”时，它确实有效，但我永远无法更改换行的类和 ID。

Answer 1

我已经更新了您的代码。$newElement 已经是您要使用新 ID 和类更新的主 DIV。

var count = 1;
var wrap;
var item;

function addRow(){
    count++;
    var $newElement = $(item);
        $newElement.find("li.col_id").text(count);
        // Remove previous class and Add new Class
        $newElement.attr('class','').addClass("item"+count);
        // Update the ID
        $newElement.attr('id',"item"+count);
        // Update the onlick event with new Item ID
        $newElement.find('.deleteRow').attr('onclick','deleteRow("#'+"item"+count+'")');
        // Remove ID item1 make it (item+count)
        // Change deleteRow('#item1') to deleteRow('#item2')
        $($newElement).appendTo(".options");

    };

$(document).ready(function(){
    wrap = $(".options").html();
    item = wrap;
    id = $("div.item1");
    id.find("li.col_id").text("1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options" id="options">
        <div class="item1" id="item1">
            <div class="left_wrap">
                <ul>
                    <li class="col_id b-bottom"></li>
                    <li class="hazard_header"><h3>Hazard</h3></li>
                    <li class="hazard_input b-bottom"></li>
                    <li class="con_header b-bottom"><h3>Controls</h3></li>
                    <li class="cat_header"><h3>Consequence Category</h3></li>
                    <li class="cat_options"></li>
                </ul>
            </div>
            <div class="right_wrap">
            </div>
            <div class="controls">
                <div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
                <div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
            </div>
        </div><!-- End Item -->
    </div> <!-- End Options Wrap -->