在单个包装器div中包装2个元素类型的每次迭代

Question

我有这个：

<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循环，我可能需要计算每个元素的数量并为它们分配索引？

Answer 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>

Answer 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/