Question

我在下面的代码引导代码块中添加了新列：

<div class="row pb-4">
     <div class="col-md-4">
         <p class="text-center border p-3 ReasonToBuyBlockEntry">
           Column - 1
         </p>
     </div>
     <div class="col-md-4">
         <p class="text-center border p-3 ReasonToBuyBlockEntry">
           Column - 2
         </p>
     </div>
 </div>

我想要的是，每当我按下“插入”按钮
时，都应生成以下代码

<div class="row pb-4">
     <div class="col-md-4">
         <p class="text-center border p-3 ReasonToBuyBlockEntry">
           Column - 1
         </p>
     </div>
     <div class="col-md-4">
         <p class="text-center border p-3 ReasonToBuyBlockEntry">
           Column - 2
         </p>
     </div>
     <!-- New code would be added here /-->
     <div class="col-md-4">
         <p class="text-center border p-3 ReasonToBuyBlockEntry">
           Column - 3 (New) 
         </p>
     </div>
 </div>

请参阅以下jquery代码，我在jquery中为它做些什么，但对我而言永远无效。

$('#inserGridWithOption').click(function(){
   var gridHtml '<div class="row pb-4"> <div class="col-md-4"> <p class="text-center border p-3 ReasonToBuyBlockEntry"> Column - 1 </p> </div> <div class="col-md-4"> <p class="text-center border p-3 ReasonToBuyBlockEntry"> Column - 2 </p> </div> </div>'; 

   var newColumn = '<div class="col-md-4"> <p class="text-center border p-3 ReasonToBuyBlockEntry"> New Column </p></div>';

});

请帮助我解决这个难题，因为我是初学者，还在学习东西。

Answer 1

您可以使用jQuery方法children()和last()查找集合中的最后一个元素。之后，只需添加您要插入的代码即可。

$("#inserGridWithOption").on("click", function(){
        var newColumn = '<div class="col-md-4"> <p class="text-center border p-3 ReasonToBuyBlockEntry"> New Column </p></div>';
        $(".row.pb-4").children().last().append(newColumn);
    });

Answer 2

以下是我尝试很多之后找到的解决方案：-

$('#inserGridWithOption').click(function(){
  var markupStr = '<div class="col-md-4"> <p class="text-center border p-3 ReasonToBuyBlockEntry"> Text to edit. </p></div>';
  var res = $('.row.pb-4').summernote('code'); //Getting preloaded content from summernote editor.
  var newRes = "<div class=\"row pb-4\">" + res+ " " + markupStr + "</div>"; //Consolidating new column with preloading content.

  $('#homerow6col1').summernote('code', newRes); //Updating again final content in summernote editor.
});

如何使用jQuery在现有网格行和列中添加引导网格列？

2 个答案: