裹在個別包裝的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

回答

相關問題