在单个包装器div中包装2个元素类型的每次迭代
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在单个包装器div中包装2个元素类型的每次迭代相关的知识，希望对你有一定的参考价值。
我有这个：
<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循环，我可能需要计算每个元素的数量并为它们分配索引？
答案
这有效。所以基本上我删除所有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>另一答案
可能还有其他方法，但你可以这样做：
$(".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/
以上是关于在单个包装器div中包装2个元素类型的每次迭代的主要内容，如果未能解决你的问题，请参考以下文章