Это происходит потому, что метод jquery .append()
всегда вставляет новое содержимое, указанное параметром, в конец каждого элемента. Одним из способов решения этой проблемы является .append()
кнопка Обновить и удалить внутри класса media-body
, например:
$(divsrt).find(".media-body")
.append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
.append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");
вместо добавления ее к TableBody
:
$(divsrt).append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
.append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");
Итак, полный код будет выглядеть так:
var codeBlock = '....'; // all current html string here
var closing = '</div> </div> </div> </div> </div>';
// You can append both opening and closing tags together
$(divsrt).append(codeBlock + closing);
$(divsrt).find(".media-body")
.append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>")
.append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>");
РЕДАКТИРОВАТЬ:
Мы можем исправить последнюю проблему, сначала создав родительский класс внутри l oop как:
let parent = `card${i}`;
Этот класс будет просто использоваться, чтобы мы могли обновить селектор .find(...)
, чтобы он указывал на спецификацию c card
внутри l oop. Затем нам нужно добавить класс к codeBlock
, например:
var codeBlock = ' <div class="card ' + parent + '"> <div class="card-content"> .... ';
Итак, card
div будет иметь дополнительный класс, например card1
, card2
и т. Д.
И, наконец, мы обновим $(divsrt).find(".media-body")
как:
$(divsrt).find("." + parent + " .media-body")
Это сделано для того, чтобы мы могли добавлять кнопки «Обновить» и «Удалить» только к текущему card
вместо всех ранее добавленных card
с.
Итак, полный код будет выглядеть так:
for (i = content.length - 1; i >= 0; i--) {
let obj = content[i];
let parent = `card${i}`;
var codeBlock = ' <div class="card ' + parent + '"> <div class="card-content"> .... ';
var closing = '</div> </div> </div> </div> </div>';
$(divsrt).append(codeBlock + closing);
$(divsrt).find("." + parent + " .media-body")
.append($("<a>").addClass("btn btn-sm btn-danger")
.html("Delete").on("click", obj, Delete)).append("</a>")
.append($("<a>").addClass("btn btn-sm btn-info")
.html("Update").on("click", obj, Update)).append("</a>");
}