jQuery插入到最后一个元素之后

Question

我想在最后一个元素后添加元素。 我的当前代码：

<div class="find"><div id="FirstElement"> /*First element loaded first */ </div><div>

$('#AddNextElement' + id).click(function (e) {
   $('<div id="NextElement' + id +'">' + /*Add after the last element*/ + '</div>').insertAfter($("#FirstElement"));
}

当前它只在第一个元素后添加：

 

1   4   3   2

我希望每次都在最后一个元素后添加：

 

1   2   3   4

我遵循了这些链接，但没有找到我要找的内容：

jQuery insertAfter last item

insertAfter specific element based on ID

jQuery: Add element after another element

提前感谢！

我是如何修复它的：

$('#AddNextElement' + id).click(function (e) {
   $('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>').insertAfter($("#FirstElement").parent().find('.Finder').last());
}

我找到了.parent().find('.find').last(); 然后插入在最后面

- Norris

---

为什么你不能简单地使用 .append()？ - Satpal

.append()会帮助你完成工作。 - Anik Islam Abhi

"NextElement"' + id +' 这段代码会返回 "NextElement"0 "NextElement"1 等等... 我认为这样更好: "NextElement' + id +'" 返回 "NextElement0" "NextElement1" 等等... - Frogmouth

Answer 1

你只需要使用last()方法

$('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>')
.insertAfter($('[id^="NextElement"]').last());

- Bhojendra Rauniyar

---

我尝试了添加 .last()，但结果仍然相同！ - Norris

你使用过 [id^= ... 吗？ - Bhojendra Rauniyar

你说的对，我需要获取父元素然后找到最后一个。谢谢。 - Norris

last() 应该在 insertAfter() 之前。 - raz

Answer 2

给所有元素添加一个类怎么样？这样找到最后一个就更容易了:

$('.element-class:last').after('<div class="element-class" id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>');

当然，这意味着您的第一个元素也必须具有该类：

<div class="element-class" id="FirstElement"> /*First element loaded first */ </div>

- Thanasis Pap

Answer 3

找到DOM中的最后一个元素，在你的情况下它将是“NextElementxx”，然后使用“after”：

$('#NextElement2').after( ..new stuff.. );

- Pat Dobson

Answer 4

HTML：

<div id="FirstElement"> First element loaded first  </div>

<div id="AddNextElement">Click me</div>

JS：

var current = 0;
$('#AddNextElement').click(function (e) {
    var $el = (current == 0) ? $("#FirstElement") : $("#NextElement"+current);
    current++;
    $('<div id="NextElement' + current +'">Other element '+current+'</div>').insertAfter($el);
});

在jsfiddle上尝试一下吧

- Frogmouth

Answer 5

您可以直接使用以下代码：

jQuery('##AddNextElement').last().after();

- Oussama Khoubrane

Answer 6

一种方法是存储最后一个元素。

<div id="FirstElement"> /*First element loaded first */ </div>

var lastElement = $('#FirstElement');

$('#AddNextElement' + id).click(function (e) {
    var element = $('<div id="NextElement"' + id +'>' + /*Add after the last element*/ + '</div>'));
    element.insertAfter(lastElement);
    lastElement = element;
}

- Smallcampus Tin

Answer 7

您可以尝试以下代码，它将在最后一个“NextElement” div之后添加新的div。

JS代码：

$(function(){
    $('#AddNextElementButton').on("click", function (e) {
        var id = $("[id^='NextElement']").length ? $("[id^='NextElement']").length+1 : 1;

        if($("[id^='NextElement']").length){
            $('<div id="NextElement'+ id +'">Add after the last element</div>').insertAfter($('[id^="NextElement"]').last());
        } else {
            $('<div id="NextElement'+ id +'">Add after the last element</div>').insertAfter($('#FirstElement'));
        }
    });
});

- Ashish Panchal

Answer 8

希望这能让你更好地理解 GitHub: Omar-baksh

// code by GitHub: omar-baksh 
// jquery is required online !!


       /*
       //this scricp test if jquery loded 

       window.onload = function() {
           if (window.jQuery) {  
               // jQuery is loaded  
               alert("Yeah!");
           } else {
               // jQuery is not loaded
               alert("Doesn't Work");
           }
       }
       */

var gfather = document.getElementsByClassName('Gfather');
var father =  document.getElementsByClassName('father');
var son = document.getElementsByClassName('son');


function gf(argument) {
$(gfather).mouseenter(function(){
 for (let i = 0; i < father.length; i++) {
  father[i].style.display='block';
 };
// show father fun() body show  body last ...

});

$(father).mouseenter(function(){
 for (let i = 0; i < son.length; i++) {
  son[i].style.display='block';
 };
// son show  body last ...
});



 // gf body last ...
}

// show form setting bottun fun()

function add(){
  const x = document.getElementById("frm").style.display='block';
 alert('setting opened');
 
}

// form  add element fun()
var clslist=document.getElementsByClassName("list");
var inher =document.getElementById("level");
var num =document.getElementById("num").value;
var txt =document.getElementById("inp-text");
// var add-btn = document.getElementById("btn-secsuce");

/*
$("#inher").change(function () {
 alert(inher);
 document.getElementById("inp-text")="you selected"+ document.getElementById("level").value;
 // body...
});
*/
var clss ="";
var ii;
$( "#btn-secsuce" ).click(function () {    
//txt.value="class name "+inher.value;  
    if( String(inher.value) =="Grand father"){
      clss ="Gfather";
 jQuery('<div/>', {
    id: Math.ceil(Math.random() * 999),
    text:txt.value,
    "class": clss,
    title: clss+clss.length
}).appendTo(clslist);

 alert("add class "+inher.value+gfather.length);
}


else { // alert("class enhhert is roung you chose " +inher.value )
 
}


/// add father to g father

if( String(inher.value) =="father"){
 var txt2 = $("<div class="+"father"+"></div>").text(txt.value);
  $(father[num-1]).after(txt2);


}

else{
 


}


});  

.Gfather{
  width: 60px;
  height: auto;
border-left: 6px dashed  red;
border-bottom: 6px dashed  red;
  background-color: silver;
 top:0;
  display:block;
position:relative ;
margin-left:9px;
 white-space: nowrap;
}

.father{
  width: 60px;
    border-left: 6px dashed  red;
border-bottom: 6px dashed  red;
 bottom:0;
  padding-top:0px;
border-right-width: small;
left:66px;
   white-space: nowrap;
position:relative ;
background-color: #550088;
color:white;
display: block;
}

<head>
  <title>tree js</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./tree.css">
</head>
<body>
<div class="list">
      <div class ="Gfather" onmouseover="gf();">
      grand father 1
      
      </div> 
         <div class ="father">
          father
               
          </div>
        
        

            <div class ="son">son
           </div>
    <div class ="son">son
           </div>
   
       
          </div>
          <!-- add element show setting btn -->

          <button id="add" onclick="add()" > add setting</button>

       <form id="frm">

                                                     <h6>1</h6>
           <select id="level">
               <option>Grand father</option>
               <option>father</option>
               <option>son</option>
               
           </select>

          
                                                      <h6>2</h6> 
           <select id="num">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
               <option>6</option>
               <option>7</option>
               <option>8</option>
               <option>9</option>
           </select>
           <br>
                                                       <h6>3</h6>
            <input id="inp-text" type="text">

                                                 <h5 >4</h5>
            <button type="button" id="btn-secsuce"  >Add The Element  </button>
       </form>
       <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
       <script type="text/javascript" src="./tree.js"></script>

- Omar bakhsh

---

请阅读如何撰写优秀答案。一堵带有描述“希望这会让你更好地理解”的格式混乱的代码墙不太可能让人们更好地理解。此外，如果这不是您的代码，请添加指向原始代码的链接。 - barbsan