JQuery clone HTML Выбирает и вставляет в новую строку внутри Row и Col div

Question

У меня есть несколько HTML Select, которые я хочу клонировать и вставить в новую строку внутри новых разделов Bootstrap row и col . Фрагмент как под:

	$("#subBtn").click(function(){
  	var ifType = $("#pcker").clone();
    var ifType2 = $("#pcker2").clone();
  	$("#scontainer").append("<div class='row'><div class='col'>");
    $("#scontainer").append(ifType);
    $("#scontainer").append("</div>");
    $("#scontainer").append("<div class='col'>");
    $("#scontainer").append(ifType2);
    $("#scontainer").append("</div></div>");

})

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
	<div class="row">
		<div class="col">
      <select class="selectpicker" data-live-search="true" id="pcker">
        <option value='gag'>raps</option>
        <option value='gag'>Experiments</option>
        <option value='gag'>value</option>
        <option value='gag'>select</option>
        <option value='gag'>bootstrap</option>      
      </select>

    <select class="selectpicker" data-live-search="true" id="pcker2">
      <option value='gag2'>raps</option>
      <option value='gag2'>Experiments</option>
      <option value='gag2'>value</option>
      <option value='gag2'>select</option>
      <option value='gag2'>bootstrap</option>
    </select>

    <button class="btn" type="button" id="subBtn" value="test">Add Button</button>
  </div>
</div>

  <div class="row" id="scontainer"></div>
  </div>
</body>

Проблема в том, что вместо того, чтобы получать новые Select внутри строки и столбцов div, они отображаются вне div.

enter image description here

Как вставить новый выбор, чтобы HTML выглядел как

<div class="row"><div> class="col"><select><option></option></select></div><div class="col"><select><option></option></select></div></div>

jquery bootstrap-4 html-select

0

Monty Swanson 25 Окт 2019 в 09:20

Answer 1

Вам необходимо добавить div как целый элемент (открывать и закрывать теги), а не по частям. после добавления div нужно добавить поля выбора внутри необходимого div

ПРИМЕЧАНИЕ. Я добавил логику для получения уникальных идентификаторов клонированных элементов.

См. ниже

var id1=0;
var id2=0;
$("#subBtn").click(function(){
    var ifType = $("#pcker").clone();
    var ifType2 = $("#pcker2").clone();
    var $row = $("<div class='row'></div>");
    $("#scontainer").append($row);
    var $col1 = $("<div class='col'></div>");
    var $col2 = $("<div class='col'></div>");
    $row.append($col1);
    $row.append($col2);

    $col1.append(ifType);
    $col2.append(ifType2);

   // change id of cloned element just to have unique ids
   $col1.attr('pcker'+id1);
   $col2.attr('pcker1'+id2);
   id1++;
   id2++;
});

1

Bhushan Kawadkar 25 Окт 2019 в 06:27

Answer 2

Хорошо, попробуйте этот способ:

$("#subBtn").click(function(){
        var ifType = $(".pcker").eq(0).clone(true);
        var ifType2 = $(".pcker2").eq(0).clone(true);
     
      $("#scontainer").append("<div class='row'><div class='col'>");
      $("#scontainer").find('.col').last().append(ifType);
      $("#scontainer").find('.col').last().append(ifType2); 
      $("#scontainer").find('select').last().append("</div></div>"); 
    })

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="row">  	 
        		<div class="col">
            
              <select class="selectpicker pcker" data-live-search="true">
                <option value='gag'>raps</option>
                <option value='gag'>Experiments</option>
                <option value='gag'>value</option>
                <option value='gag'>select</option>
                <option value='gag'>bootstrap</option>      
              </select>

            <select class="selectpicker pcker2" data-live-search="true">
              <option value='gag2'>raps</option>
              <option value='gag2'>Experiments</option>
              <option value='gag2'>value</option>
              <option value='gag2'>select</option>
              <option value='gag2'>bootstrap</option>
            </select>

            <button class="btn" type="button" id="subBtn" value="test">Add Button</button>
          </div>
        </div>

          <div id="scontainer"></div>
    </body>

Посмотрите, я заменил атрибут id на class, потому что, как я уже говорил, id должен быть уникальным.

1

Aksen P 25 Окт 2019 в 06:52

JQuery clone HTML Выбирает и вставляет в новую строку внутри Row и Col div

2 ответа

Похожие вопросы

Новые вопросы

jquery