将 2 种元素类型的每次迭代包装在单独的包装器 div 中答案

【问题标题】：Wrap each iteration of 2 element types in individual wrapper divs将 2 种元素类型的每次迭代包装在单独的包装器 div 中
【发布时间】：2019-04-20 21:47:36
【问题描述】：

我有这个：

<div class="w3_radiobuttons">
  <div class="product-options-field-name">Foo Type?</div>
  <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Just Sandwich">
  <span>foo</span>
  <br>
  <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Meal (+0.750)">
  <span>reg foo (+0.750)</span>
  <br>
  <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Large Meal (+1.00)">
  <span>Large foo (+1.00)</span>
  <br>
</div>

我需要这个：

<div class="w3_radiobuttons">
  <div class="product-options-field-name">Foo Type?</div>
  <div class="radioWrap">
      <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Just Sandwich">
      <span>foo</span>
  </div>
  <div class="radioWrap">
      <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Meal (+0.750)">
      <span>reg foo (+0.750)</span>
  <div class="radioWrap">
      <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Large Meal (+1.00)">
      <span>Large foo (+1.00)</span>
  </div>
</div>

我尝试了一个 jquery wrapAll() 但它显然只是将整个元素包装在 2 radioWrap divs 中。

$( ".w3_radiobutton input, .w3_radiobutton span" ).wrapAll( "<div class='radioWrap' />");

我的问题是，我如何循环遍历主 w3_radiobuttons div 中的所有元素，并将出现在
标记之前的输入和跨度包装在名为 radioWrap 的各个包装器标记中。

我意识到这可能是某种类型的 for 循环，我可能必须计算每个元素的数量并为其分配索引？

【问题讨论】：

标签： javascript jquery loops radio-button

【解决方案1】：

这行得通。所以基本上我删除了所有br 标签，因为输出没有它们。然后我计算输入和跨度元素的数量，然后将该数字除以 2 并为该数字创建一个for loop。然后最后使用 CSS 选择器:nth-of-type() 我选择第一、第二、第三组并添加要求的 div。希望这能满足您的要求！

$('.w3_radiobuttons').find('br').remove();
console.log($('input,span'));
$el = $('input,span')

for(var i=0;i< $el.length/2; i++){
  console.log($('input:nth-of-type('+i+'),span:nth-of-type('+i+')'));
  $('input:nth-of-type('+i+'),span:nth-of-type('+i+')').wrapAll("<div class='radioWrap' />");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3_radiobuttons">
  <div class="product-options-field-name">Foo Type?</div>
  <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Just Sandwich">
  <span>foo</span>
  <br>
  <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Meal (+0.750)">
  <span>reg foo (+0.750)</span>
  <br>
  <input name="properties[Meal?]" class="product-options-radiobutton" type="radio" group="radiogroup-462699" value="Large Meal (+1.00)">
  <span>Large foo (+1.00)</span>
  <br>
</div>

【讨论】：

【解决方案2】：

可能还有其他方法，但您可以这样做：

$(".w3_radiobuttons br").remove();
$(".w3_radiobuttons input").each(function() {
  $(this).next("span").addBack().wrapAll("<div class='radioWrap' />");
});

https://jsfiddle.net/patyvn67/1/

或者

$(this).add( $(this).next() ).wrapAll("<div class='radioWrap' />");

https://jsfiddle.net/patyvn67/2/

【讨论】：