jQuery: .wrapAll 围绕多个重复元素

Question

我有一些感觉有点乱的表格，因为每一行并没有真正被 div 或 ul/li 包裹，这使得样式设计变得困难。所以我想用 jQuery 把它包起来，因为我不能直接编辑 HTML。

现在看起来有点像这样：

<p class="A">Blabla</p>
<input class="B">

<p class="A">Blabla</p>
<input class="B">

<p class="A">Blabla</p>
<input class="B">

<p class="A">Blabla</p>
<input class="B">

我试图使用这段代码：

jQuery(document).ready(function( $ ){
    $( ".A, .B" ).wrapAll("<div class='C'></div>");
});

当然，这会在所有 A 和 B 周围放置一个 div 作为“块”。但我想要的是在每一行周围都有这个 div。

因此，我基本上想要这个：

<div class="C">
  <p class="A">Blabla</p>
  <input class="B">
</div>

<div class="C">
  <p class="A">Blabla</p>
  <input class="B">
</div>

<div class="C">
  <p class="A">Blabla</p>
  <input class="B">
</div>

<div class="C">
  <p class="A">Blabla</p>
  <input class="B">
</div>

你能帮忙吗？ (:

注意：对我来说不必 div。 ul/li 也可以，但也许工作量更大？

Answer 1

使用each()

$(".A + .B").each(function() {
  $(this).prev().addBack().wrapAll("<div class='C'></div>");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="A">Blabla</p>
<input class="B">

<p class="A">Blabla</p>
<input class="B">

<p class="A">Blabla</p>
<input class="B">

<p class="A">Blabla</p>
<input class="B">

Answer 2

您可以使用每个函数遍历每个选定的 A class，然后使用添加函数创建一个新的 jQuery 对象 B class 通过在 next 函数的帮助下立即跟随兄弟姐妹，然后使用 wrapAll 函数包装它们。

$(".A").each(function(){
    $(this).add($(this).next(".B")).wrapAll("<div class='C'></div>");
})

如果您想在 A class 和另一个 A class,

之间添加所有内容

$(".A").each(function(){
    $(this).nextUntil(".A").addBack().wrapAll("<div class='C'></div>")
})

这个也能解决你上面的问题

jQuery: .wrapAll 围绕多个重复元素

jQuery: .wrapAll around multiple, repeating Elements

html

jquery

repeat

wrapper