JQuery - Modifier une structure HTML

Version imprimable

Bonjour à tous.

J'ai un CMS qui génère le html suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
            <div class="field">
                <h4>Économies</h4>
                <ul>
                    <li>Plage de modulation de 10 à 100%</li>
                    <li>Comptage d énergie intégré</li>
                    <li>Système Gaz Adaptive Control</li>
                    <li>Pompe modulante ErP</li>
                    <li>Solution de couplage EnR</li>
                </ul>
                <h4>Confort</h4>
                <ul>
                    <li>Chaudière gaz condensation, avec chauffage et ECS à accumulation</li>
                    <li>Ballon de 40 litres assurant un débit ECS jusqu à 18,3 l/mn</li>
                    <li>Stabilité de la température grâce à la sonde sanitaire</li>
                </ul>
                <h4>Fiabilité</h4>
                <ul>
                    <li>Corps hydraulique en laiton garantie 5 ans</li>
                    <li>Ballon en inox à serpentin</li>
                    <li>Échangeur spirale en inox</li>
                </ul>
                <h4>Installation facilitée</h4>
                <ul>
                    <li>Régulation complète déportable disposant d un affichage avec menu déroulant</li>
                    <li>Sonde extérieure de série</li>
                    <li>Solutions de remplacement</li>
                </ul>
            </div>

C'est un champ de texte riche dans le CMS.

Il faut que je le transforme ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
             <div class="col-sm-6">
                <div class="product_onglet_bloc_title">
                    Économies :
                </div>
                <div class="product_onglet_bloc">
                    <p>Plage de modulation de 10 à 100%</p>
                    <p>Comptage d’énergie intégré</p>
                    <p>Système Gaz Adaptive Control</p>
                    <p>Pompe modulante ErP</p>
                    <p>Solution de couplage EnR</p>
                </div>
                <div class="product_onglet_bloc_title">
                    Confort :
                </div>
                <div class="product_onglet_bloc">
                    <p>Chaudière gaz condensation, avec chauffage et ECS</p>
                    <p>allon de 40 litres assurant un débit ECS jusqu’à 18,3 l/mn</p>
                    <p>Stabilité de la température grâce à la sonde sanitaire</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="product_onglet_bloc_title">
                    Fiabilité :
                </div>
                <div class="product_onglet_bloc">
                    <p>Corps hydraulique en laiton garantie 5 ans</p>
                    <p>Ballon en inox à serpentin</p>
                    <p>Échangeur spirale en inox</p>
                </div>
                <div class="product_onglet_bloc_title">
                    Installation facilitée :
                </div>
                <div class="product_onglet_bloc">
                    <p>Régulation complète déportable disposant d’un affi chage avec menu déroulant</p>
                    <p>Sonde extérieure de série</p>
                </div>
            </div>

C'est surtout la séparation en 2 colonnes que je ne vois pas comment faire...

Si quelqu'un a une idée :)

Merci.

04/12/2017, 22h33
mathieu

Comment sont définies les 2 colonnes ?
les deux 1res parties dans la 1re colonne et les 2 autres dans la 2e colonne ? Est ce qu'il y a toujours 4 parties ?
05/12/2017, 09h17
Rémy DEV

On part du principe qu'il y a toujours 2 colonnes.
Que le contenu de la colonne 1 contient les 2 premiers éléments.
Les éléments commencent par un <h4>.
Du coup la colonne 2 contient le reste.

Du coup on peut partir sur un code qui commence par faire une liste des éléments...

J'ai un peut avancé et j'en suis là.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
            <script>
                $('.JS_range_advantages_split').each(function () {
                    var warper = $(this).find('.field');
                    warper.find('h4').addClass('product_onglet_bloc_title');
                    warper.find('ul').addClass('product_onglet_bloc');
                    var $new = $('<div class="new"></div>');
                    var $current_warper = $('<div class="col-sm-6"></div>');
                    var h4ctp = 0;
                    warper.children().each(function (index, item ) {
                        var $item = $(item);
                        console.log (index, item, (index%2), h4ctp );
 
                        if ($item.is("h4")) {
                            h4ctp++;
                        }
                        if (h4ctp%2 == 1) {
                            if ($current_warper) {
                                console.log('append $current_warper:', $current_warper, ' to $new', $new);
                                $new.append($current_warper);
                            }
                            $current_warper = $('<div class="col-sm-6"></div>');
                        }
                        $current_warper.append($item);
 
                    });
                    if ($current_warper) {
                        console.log('append $current_warper:', $current_warper, ' to $new', $new);
                        $new.append($current_warper);
                    }
                    console.log('append $new:', $new, ' to warper', warper);
                    warper.append($new);
                });
            </script>

J'ai wrapé le code html généré par le CMS avec une classe JS_range_advantages_split.

Il ne me reste plus qu'a trouver les bons réglages et c'est bon :)

Et voici la version finale:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
            <script>
                $('.JS_range_advantages_split').each(function () {
                    var $warper = $(this).find('.ezxmltext-field');
                    $warper.find('h4').addClass('product_onglet_bloc_title');
                    $warper.find('ul').addClass('product_onglet_bloc');
                    var $new = $('<div class="new_warper"></div>');
                    var $current_warper = null;
                    var h4ctp = 0;
                    $warper.children().each(function (index, item ) {
                        var $item = $(item);
                        //console.log (index, item, (index%2), h4ctp );
                        if ($item.is("h4")) {
                            if (h4ctp%2 == 0) {
                                if ($current_warper) {
                                    //console.log('append $current_warper:', $current_warper, ' to $new', $new);
                                    $new.append($current_warper);
                                }
                                $current_warper = $('<div class="col-sm-6"></div>');
                            }
                            h4ctp++;
                        }
                        $current_warper.append($item);
                    });
                    if ($current_warper) {
                        //console.log('append $current_warper:', $current_warper, ' to $new', $new);
                        $new.append($current_warper);
                    }
                    //console.log('append $new:', $new, ' to warper', $warper);
                    $warper.append($new);
                });
            </script>

C'était moins compliqué que ce que je pensais.

Peut-être que ça aidera quelqu'un un jour ......

bonjour,
une solution basée sur l'utilisation de replaceWith() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var setHtml = function(elem) {
    $(elem).children()
      .each(function(index, obj) {
        return $(obj).replaceWith('<p>' + $(this).html() + '</p>');
      });
  };
$('.field').each(function(i, item) {
  $(item).children().each(function(j, item2) {
    if ($(item2).is('h4')) {
      $(item2)
        .replaceWith('<div class="product_onglet_bloc_title">' + $(item2).html() + '</div>');
    } else if ($(item2).is('ul')) {
      $(item2).html(setHtml(item2))
        .replaceWith('<div class="product_onglet_bloc">' + $(item2).html() + '</div>');
    }
  });
});

05/12/2017, 14h43
Rémy DEV

Merci pour cet apport Toufik.

Je passe en Résolu.