在单个包装器div中包装2个元素类型的每次迭代-Java 学习之路

我有这个：

<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 div中的全部元素 .

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

我的问题是，如何遍历主"w3_radiobuttons" div中的所有元素并包装出现在之前的输入和跨距
单个包装器标签中的标签，名为"radioWrap" .

我意识到它可能是某种类型的for循环，我可能需要计算每个元素的数量并为它们分配索引？

任何帮助将非常感激 .

2 回答

这有效 . 所以基本上我删除了所有 br 标签，因为输出没有它们 . 然后我计算输入和 Span 元素的数量，然后将该数字除以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>

回复于 2024-05-05T23:51:18+08:00

0
可能还有其他方法，但你可以这样做：
```
$(".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/
回复于 2024-05-05T23:51:18+08:00

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

2 回答

相关问题