Question

我的HTML看起来像这样：

<div class="imageRowHeader">
 Header Content
</div>
<div class="imageRowContent">
  <img src="image.jpg">
</div>

<div class="imageRowHeader">
 Header Content 2
</div>
<div class="imageRowContent">
  <img src="image2.jpg">
</div>

重复多次。

我想使用jQuery使它看起来像这样（我不能直接改变HTML）。

<div class="imageRow">
    <div class="imageRowHeader">
     Header Content
    </div>
    <div class="imageRowContent">
      <img src="image.jpg">
    </div>
</div>

<div class="imageRow">
    <div class="imageRowHeader">
     Header Content
    </div>
    <div class="imageRowContent">
      <img src="image.jpg">
    </div>
</div>

Answer 1

您需要遍历每个imageRowHeader，然后对于当前标头和下一个内容同级元素，请调用wrapAll()

$('.imageRowHeader').each(function() {
  $(this).next().addBack().wrapAll('<div class="imageRow"></div>')
})

.imageRow {
  border: 1px solid grey;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imageRowHeader">
  Header Content
</div>
<div class="imageRowContent">
  <img src="image.jpg">
</div>

<div class="imageRowHeader">
  Header Content 2
</div>
<div class="imageRowContent">
  <img src="image2.jpg">
</div>

在jQuery中绕过2个重复类包装类

1 个答案: