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

问题描述

我有某种形式的感觉有点混乱，因为每一行并没有真正由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>");
});

当然，这会将所有As和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也可以，但是也许还有更多工作要做？

解决方法

使用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">

您可以使用每个函数遍历每个选定的A类，然后使用add函数通过使用next函数立即获取同级对象，然后使用B类与$(".A").each(function(){ $(this).add($(this).next(".B")).wrapAll("<div class='C'></div>"); })类创建新的jQuery对象，然后包装使用wrapAll函数。

，如果要在A类和另一个$(".A").each(function(){ $(this).nextUntil(".A").addBack().wrapAll("<div class='C'></div>") })类之间添加所有内容，

struct ContentView: View {
    @State var value = 22.0
    
    var steps : Double {
        value >= 50.0 ? 10.0 : 1.0
    }

    var body: some View {
        Slider(value: $value,in: 21...90,step: steps)
        Text("\(value)")
    }

}

这也将解决您的上述问题

html jquery repeat wrapper