Question

我有一个问题，在这里，我有一个动态生成的div中的文本，所以我想将它包装在div中以进一步设计样式，当我将它包装在div中时，我想追加它前面的一个div用于图像。当我运行我写的代码时，我看到生成了多个div

var pageInitialized = false;
$(function() {
if (pageInitialized) return;
pageInitialized = true;

$('.entry-content').each(function(i, v) {
    $(v).contents().wrap("<div class='alert_content'></div>");
});

$('.alert_content').each(function(i, v) {
    $(v).before("<div class='error_image'></div>");
});

[![The output is as follows int he image][1]][1]});

Answer 1

我认为问题是$(v).contents().wrap("<div class='alert_content'></div>");将entry-content的每个孩子用alert_content包裹起来。相反，如果您想要alert_content一个entry-content，那么请使用wrapInner()

$('.entry-content').each(function(i, v) {
  $(v).wrapInner("<div class='alert_content'></div>");
}).prepend("<div class='error_image'></div>");

//$('.alert_content').before("<div class='error_image'></div>");

.entry-content {
  padding: 5px;
  margin-bottom: 5px;
  border: 1px solid grey;
}
.alert_content {
  padding: 5px;
  margin-bottom: 5px;
  background-color: lightblue;
}
.error_image {
  padding: 5px;
  margin-bottom: 5px;
  background-color: lightyellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="entry-content">
  <div>div</div>
  <input />text
</div>

<div class="entry-content">
  <div>div</div>
  <input />text
</div>

<div class="entry-content">
  <div>div</div>
  <input />text
</div>

Answer 2

我认为应该是这样的

$('.entry-content').each(function(i, v) {
  $($(this).html()).wrap("<div class='alert_content'></div>");
});

$('.alert_content').each(function(i, v) {
  $(this).before("<div class='error_image'></div>");
});

Jquery添加多个div

2 个答案: