Jquery clone HTML选择并插入到Row和Col div内的新行中

Question

我有几个我要克隆的HTML Select，并将其插入到新的Bootstrap row和col divs中的新行中。该代码段如下：

	$("#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>

问题是，它们没有在行和列div内获取新的Select，而是在div之外呈现。

如何插入新的Select，使HTML看起来像

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

Answer 1

您需要将div附加为一个整体元素（打开和关闭标签），而不是部分附加。附加div后，您需要在所需的div中附加选择框

注意：我已添加逻辑以获取克隆元素的唯一ID

见下文

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++;
});

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").append(ifType);
  	$("#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="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>

Jquery clone HTML选择并插入到Row和Col div内的新行中

问题描述投票：0回答：2

2个回答

最新问题

Jquery clone HTML选择并插入到Row和Col div内的新行中

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2