[RÉGLÉ] Petit coup de main en javascript

[Eddy.vh]

Bonjour.

Dans un formulaire BreezingForms, j'ai des boutons radio disposés comme suit dans le code source :

<span class="bfElementGroupNoWrap" id="bfElementGroupNoWrap8043">
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 1" id="ff_elem8043"/>
<label class="bfGroupLabel" id="bfGroupLabel8043" for="ff_elem8043">Réponse 1</label>
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 2" id="ff_elem8043_1"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_1" for="ff_elem8043_1">Réponse 2</label>
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 3" id="ff_elem8043_2"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_2" for="ff_elem8043_2">Réponse 3</label>
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 4" id="ff_elem8043_3"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_3" for="ff_elem8043_3">Réponse 4</label>
</span>

J'aimerais isoler un input et son label dans une span ou une div, comme suit :

<span class="bfElementGroupNoWrap" id="bfElementGroupNoWrap8043">
<span class="maclasse">
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 1" id="ff_elem8043"/>
<label class="bfGroupLabel" id="bfGroupLabel8043" for="ff_elem8043">Réponse 1</label>
</span>
<span class="maclasse">
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 2" id="ff_elem8043_1"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_1" for="ff_elem8043_1">Réponse 2</label>
</span>
<span class="maclasse">
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 3" id="ff_elem8043_2"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_2" for="ff_elem8043_2">Réponse 3</label>
</span>
<span class="maclasse">
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 4" id="ff_elem8043_3"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_3" for="ff_elem8043_3">Réponse 4</label>
</span>
</span>

mais je ne peux modifier le fichier générateur de ce code sans impacter chaque formulaire contenant un groupe de bouton radio, ce que je souhaite éviter aussi pour des raisons de mise à jour du composant qui remettrait tout à 0. Je ne vois donc qu'une fonction javascript que je peux écrire dans les options du formulaire et ai fait quelques tests…

Si j'utilise la fonction wrapAll :

jQuery('.ff_elem, .bfGroupLabel').wrapAll('<span class="maclasse">');

J'obtiens un enveloppement de la totalité des inputs et leur label, comme suit :

<span class="bfElementGroupNoWrap" id="bfElementGroupNoWrap8043">
<span class="maclasse">
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 1" id="ff_elem8043"/>
<label class="bfGroupLabel" id="bfGroupLabel8043" for="ff_elem8043">Réponse 1</label>
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 2" id="ff_elem8043_1"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_1" for="ff_elem8043_1">Réponse 2</label>
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 3" id="ff_elem8043_2"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_2" for="ff_elem8043_2">Réponse 3</label>
<input class="ff_elem" type="radio" name="ff_nm_btngrp[]" value="R&eacute;ponse 4" id="ff_elem8043_3"/>
<label class="bfGroupLabel" id="bfGroupLabel8043_3" for="ff_elem8043_3">Réponse 4</label>
</span>
</span>

wrap enveloppe chaque élément séparément, ce que je ne souhaite bien sûr pas.

Y a-t-il une possibilité d'arriver à mes fins avec une fonction javascript ?

[Eddy.vh]

Trouvé… mais each est déprécié…

    jQuery('.bfElementGroupNoWrap .ff_elem').each(function(index) {
        jQuery(this).next('.bfGroupLabel').andSelf().wrapAll('<span class="maclasse" />')
    });

Je reste à l'écoute d'une optimisation pour remplacer each…

[cavo789]

Trouvé… mais each est déprécié…

    jQuery('.bfElementGroupNoWrap .ff_elem').each(function(index) {
        jQuery(this).next('.bfGroupLabel').andSelf().wrapAll('')
    });

Je reste à l'écoute d'une optimisation pour remplacer each…

Salut

Je t'ai lu et sorry pas de solution à te filer en js.

Note que, à mon avis, jquery est tout doucement en train de mourir. Ce ne sera pas dans six mois mais avec la venue de Vue.js, react, angular, ... jquery à fortement perdu de son intérêt. Même Bootstrap est occupé à le virer.

Bonne journée

[Eddy.vh]

Bonjour Christophe.

En continuant mes recherches, je viens de trouver une solution et ça fait exactement le travail.

function ff_QuickForm577157003_init()
{
    var set = jQuery('.bfElementGroupNoWrap').children();    
    for(var i=0, len = set.length; i < len; i+=2){
        set.slice(i, i+2).wrapAll('<span class="rdLabelGrp"/>');
    }
} // ff_QuickForm577157003_init

Je comprends pour la fin de vie de jQuery mais jusque là on pourra voir ce que BreezingForms aura mis en place dans sa prochaine version. Je ne sais juste pas quand ça sortira.