Question

现在，我尝试使用此代码添加新的Div。它有效。
问题是当我尝试在持久行中添加新的Div时。总是排在最后。
我需要在最后一行旁边添加新的Div。

也许是因为insertAfter造成的，但我无法解决。

var math = Math.random().toString(36).substr(2, 9);  
var math2 = Math.random().toString(36).substr(2, 9);  

$(document).ready(function(){

     $('<div class="row mt-2"" id="rowExpression'+math+'"></div>').appendTo('#overall');
     $('<div class="col-md-9" id="Selector'+math+'"></div>').appendTo('#rowExpression'+math);
     $('<h5> e '+math+'</h5>').appendTo('#Selector'+math);
     $('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+math+'"></div>').appendTo('#rowExpression'+math);
     $('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+math+'" ></i>').appendTo('#CRUDExpression'+math);
     $('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+math+'" ></i>').appendTo('#CRUDExpression'+math);


    }); 


function addRow(eId) {

     var mathX = Math.random().toString(36).substr(3, 12);

     $('#rowExpression'+eId.id).one( "click",function(){
         var x = $(this).prev().attr('id');

     console.log(x +'                neastest div');
     console.log(eId.id +'                    this id');
     console.log(mathX +'                     new id');

     var lastedId = $('.row').last().attr("id") ;
     console.log(lastedId, "rowExpression"+mathX);

     $('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
     .insertAfter($( "#"+x ));
     $('<div class="col-md-9" id="Selector'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<h5> e '+mathX+'</h5>').appendTo('#Selector'+mathX);
     $('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
     $('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);


}); 

}

function deleteRow(eId) {
    console.log(eId.id);
    $("#rowExpression"+eId.id).remove();    

}

这是我的html。

<form action="#" method ="post">
<div id="overall" class="col-md-12">
</div>
<button type="submit" id="submit" class="btn btn-primary ml-2 mt-2" value="submit" >submit</button> 
</form>

Answer 1

在您的代码中，您使用的是“ insertAfter（）”，而不是“ .append（）”，因为这样您可以在最后一个代码之后添加新代码。

Answer 2

没有HTML很难猜测（这些类在哪里以及如何构造它们。我会说尝试使用after而不是insertAfter，这可能是问题所在。 http://api.jquery.com/insertafter/

Answer 3

我现在得到了自己的答案。谢谢大家。

function addRow(eId) {

     var mathX = Math.random().toString(36).substr(3, 12);

     $('#rowExpression'+eId.id).one( "click",function(){
         var nearest = $(this).prev().attr('id');

     console.log(nearest +'                neastest div');
     console.log(eId.id +'                    this id');
     console.log(mathX +'                     new id');


     var lastedId = $('.row').last().attr("id") ;
     console.log(lastedId, "rowExpression"+mathX);

     /*$('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
     .insertAfter($( "#"+nearest ));*/

     if('rowExpression'+eId.id == lastedId) {
         $('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall');

         }
     else{
         $('<div class="row mt-2"" id="rowExpression'+mathX+'"></div>').appendTo('#overall')
         .insertAfter($( "#"+nearest ));

         }
     $('<div class="col-md-9" id="Selector'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<h5> e '+mathX+'</h5>').appendTo('#Selector'+mathX);
     $('<div class="col-md-1 col-md-offset-2" id="CRUDExpression'+mathX+'"></div>').appendTo('#rowExpression'+mathX);
     $('<i class="btn success-item fas fa-plus-circle pr-1" onclick="addRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);
     $('<i class="btn cross-item fas fa-minus-circle pl-1" onclick="deleteRow(this)" id="'+mathX+'" ></i>').appendTo('#CRUDExpression'+mathX);



}); 

}

使用jQuery和JavaScript添加新的div

3 个答案: