JQuery клон DIV и добавить его после конкретного DIV - PullRequest
Новая
       5

JQuery клон DIV и добавить его после конкретного DIV

49 голосов
/ 03 января 2012

enter image description here

Привет, ребята, с картинки выше, я хочу клонировать div с id # car2 и добавить его после последнего div с id, начинающимся с car, в этом примере id # car5.Как я могу это сделать?Спасибо.

Это мой пробный код: 

$("div[id^='car']:last").after('put the clone div here');

Ответы [ 4 ]

129 голосов
/ 03 января 2012

Вы можете использовать клон, а затем, поскольку каждый div имеет класс car_well, вы можете использовать insertAfter для вставки после последнего div. 

$("#car2").clone().insertAfter("div.car_well:last");
12 голосов
/ 03 января 2012

попробуйте это 

$("div[id^='car']:last").after($('#car2').clone());
1 голос
/ 22 ноября 2018

Вы можете сделать это, используя clone() функцию jQuery, Принятый ответ в порядке, но я предоставляю альтернативу этому, вы можете использовать append(), но он работает толькоесли вы можете немного изменить HTML, как показано ниже: 

$(document).ready(function(){
    $('#clone_btn').click(function(){
      $("#car_parent").append($("#car2").clone());
    });
});
.car-well{
  border:1px solid #ccc;
  text-align: center;
  margin: 5px;
  padding:3px;
  font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="car_parent">
  <div id="car1" class="car-well">Normal div</div>
  <div id="car2" class="car-well" style="background-color:lightpink;color:blue">Clone div</div>
  <div id="car3" class="car-well">Normal div</div>
  <div id="car4" class="car-well">Normal div</div>
  <div id="car5" class="car-well">Normal div</div>
</div>
<button type="button" id="clone_btn" class="btn btn-primary">Clone</button>

</body>
</html>
0 голосов
/ 01 ноября 2017

Это прекрасно работает, если прямая копия в порядке.Если ситуация требует создания новых объектов из шаблонов, я обычно оборачиваю div шаблона в скрытый div хранилища и использую html () jquery вместе с clone (), применяя следующую технику: 

<style>
#element-storage {
    display: none;
    top: 0;
    right: 0;
    position: fixed;
    width: 0;
    height: 0;
}
</style>

<script>
$("#new-div").append($("#template").clone().html(function(index, oldHTML){ 
    // .. code to modify template, e.g. below:
    var newHTML = "";
    newHTML = oldHTML.replace("[firstname]", "Tom");
    newHTML = newHTML.replace("[lastname]", "Smith");
    // newHTML = newHTML.replace(/[Example Replace String]/g, "Replacement"); // regex for global replace
    return newHTML;
}));
</script>

<div id="element-storage">
  <div id="template">
    <p>Hello [firstname] [lastname]</p>
  </div>
</div>

<div id="new-div">

</div>
...