Envelopper chaque itération de 2 types d'éléments dans divs wrapper individuels

Question

J'ai ceci:

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

J'ai besoin ceci:

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

J'ai essayé jquery wrapAll() mais de toute évidence juste enveloppé l'intégralité des éléments dans 2 divs radioWrap.

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

Ma question est, comment puis-je boucle à travers tous les éléments dans les principaux « w3_radiobuttons » div et envelopper l'entrée et portées qui apparaissent avant les
balises dans les balises wrapper individuelles appelées « radioWrap » .

Je réalise qu'il y aura probablement un type de boucle for et que je devrais peut-être compter le nombre de chaque élément et leur assigner des index?

Toute aide serait grandement appréciée.

Answer 1

Cela fonctionne. Donc, fondamentalement, je supprime tous les tags br, car la sortie ne les a pas. Ensuite, je calcule le nombre d'éléments d'entrée et d'étendue sont là, puis diviser ce nombre par 2 et créer un for loop pour ce nombre. Puis finalement en utilisant le sélecteur CSS :nth-of-type() je sélectionne les premier, deuxième, troisième groupes et ajoute le div demandé. J'espère que cela répond à vos exigences!

$('.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

Il peut y avoir d'autres moyens, mais vous pouvez faire quelque chose comme ceci:

$(".w3_radiobuttons br").remove(); 
$(".w3_radiobuttons input").each(function() { 
    $(this).next("span").addBack().wrapAll("<div class='radioWrap' />"); 
}); 

https://jsfiddle.net/patyvn67/1/

Ou

$(this).add($(this).next()).wrapAll("<div class='radioWrap' />");

https://jsfiddle.net/patyvn67/2/