裹在个别包装的div

2种元素类型的每次迭代我有这样的：裹在个别包装的div

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

任何帮助将不胜感激。

来源

2017-09-01 SykoTron

这是有效的。所以基本上我删除了所有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>

来源

2017-09-01 22:00:01

这对我有效。非常感谢你！ – SykoTron

@SykoTron不客气！ –

可能有其他的方式，但你可以做这样的事情：

$(".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/

来源

2017-09-01 22:00:37 yezzz

裹在个别包装的div

回答

相关问题