Boucler une fonction js avec des balises de class proches, mais différentes

Version imprimable

Bonjour.

Comme je crains que mon titre soit un peu vague, voici ce que je souhaite.
J'utilise Jimdo, donc mes modifications du DOM sont assez limitées, c'est pourquoi je ne pourrais faire des changements que de class ou d'id par exemple.
En fait, j'ai une liste à plusieurs niveaux, mais jimdo me la génère comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <ul> <li>Grand titre 1</li> <li style="list-style: none; display: inline;"> <ul> <li class="groupe_1">Sous titre 1</li> <li style="list-style: none; display: inline;" class="groupe_1"> <ul> <li>Contenu 1</li> <li>Contenu 2</li> <li>Contenu n</li> </ul> </li> <li class="groupe_2">Sous titre 2</li> <li style="list-style: none; display: inline;" class="groupe_2"> <ul> <li>Contenu 1</li> <li>Contenu 2</li> <li>Contenu n</li> </ul> </li> </ul> </li> </ul>
Ce que je voudrais c'est, grâce à une fonction javascript, englober un sous-titre et son contenu dans une même balise (pour une mise en forme css plus simple).
Après quelque recherches, et notamment ici, j'ai trouvé cette formidable fonction : wrapAll.
Du coup j'ai ajouté une classe différente à chaque li devant appartenir à un groupe et j'ai fait une technique de bourrin (j'utilise déjà la bibliothèque jQuery dans mes pages, donc je la réutilise ici) :
Code:

1 2 3 4 5 $(document).ready(function(){ $('.groupe_1').wrapAll('<li class="bloc"><ul class="lvl3></ul></li>'); $('.groupe_2').wrapAll('<li class="bloc"><ul class="lvl3></ul></li>'); $('.groupe_n').wrapAll('<li class="bloc"><ul class="lvl3></ul></li>'); });
Je viens enfin à ma question : est-ce que je ne peux pas utiliser une autre méthode javascript pour ne pas avoir à recopier ma ligne autant de fois qu'il y a de groupes? (parce qu'en une page j'en ai déjà près d'une trentaine et ça risque d'être un peu long).
Voilà, merci d'avance pour votre aide, et désolé pour le pavé.

25/08/2015, 14h01
SpaceFrog

En factorisant ...

Code:

$('.groupe_1, .groupe_2, .groupe_n').wrapAll('<li class="bloc"><ul class="lvl3></ul></li>');

ou avec le selecteur commence par ...

Code:

$("div[class^='groupe_']")

:weird: Oui... mais non, c'est un peu plus complexe.

Exemple :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
 
    .bloc { margin-top: 2em; background-color: yellow; }
    .lv13 { padding: 2em; }
 
  </style>
</head>
<body>
 
  <ul>
    <li>Grand titre 1</li>
    <li style="list-style: none; display: inline;">
      <ul>
        <li class="groupe_1">Sous titre 1</li>
        <li style="list-style: none; display: inline;" class="groupe_1">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_2">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_2">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_3">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_3">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_4">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_4">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_5">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_5">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
 
      // OK si groupe par groupe
      //$( "li.groupe_1" ).wrapAll( '<li class="bloc">"Bloc"<ul class="lvl3"></ul></li>' );
 
      // KO ! Regroupe tous les groupes dans le même bloc
      //$( "li.[class^='groupe_']" ).wrapAll( '<li class="bloc">"Bloc"<ul class="lvl3"></ul></li>' );
 
      var n = 1;
 
      $( "li[class^='groupe_']" ).each( function( i, item ){        
        if ( i % 2 != 0 ) {
          $( "li.groupe_" + n ).wrapAll( '<li class="bloc">Bloc ' + (n++) + '<ul class="lvl3"></ul></li>' );
        }
      });
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

26/08/2015, 09h39
Nighthawk
Bonjour, et merci pour vos réponses.

J'ai testé vos solutions et malheureusement, il manquait peu de choses pour qu'elles fonctionnent. En fait, je n'ai notamment pas tout à fait compris comment tu incrémentais ta boucle danielhagnoul. J'ai fait quelque tests, mais sur 8 groupes je n'ai pas réussi à tous les grouper (il m'en manquait toujours 1)

Du coup j'ai fait de nouvelles recherches et j'ai trouvé mon bonheur. La fonction de boucle par excellence, celle à laquelle je ne pense jamais : for. J'ai donc fait une bout de code comme ça :
Code:

1 2 3 for(var i=1; 1<5; i+=1){ $('li.groupe_' + i).wrapAll('<li class="bloc"><ul class="lvl3"></ul></li>'); }
Et j'ai finalement eu le résultat que j'attendais. La seule contrainte c'est que je dois connaître mon i maximum (ou au moins une approximation), mais pour ce que j'en fais, c'est suffisant.

Encore merci pour votre aide qui m'as permis de trouver les bonnes pistes.

Je viens de tester mon code avec 8 groupes et comme je le pensais, cela fonctionne.

Pour tester, il suffit de faire un copier-coller dans un nouveau fichier HTML.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
 
    .bloc { margin-top: 2em; background-color: yellow; }
    .lv13 { padding: 2em; }
 
  </style>
</head>
<body>
 
  <ul>
    <li>Grand titre 1</li>
    <li style="list-style: none; display: inline;">
      <ul>
        <li class="groupe_1">Sous titre 1</li>
        <li style="list-style: none; display: inline;" class="groupe_1">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_2">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_2">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_3">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_3">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_4">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_4">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_5">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_5">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_6">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_6">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_7">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_7">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
        <li class="groupe_8">Sous titre 2</li>
        <li style="list-style: none; display: inline;" class="groupe_8">
          <ul>
            <li>Contenu 1</li>
            <li>Contenu 2</li>
            <li>Contenu n</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
 
      var n = 1;
 
      $( "li[class^='groupe_']" ).each( function( i, item ){        
        if ( i % 2 != 0 ) {
          $( "li.groupe_" + n ).wrapAll( '<li class="bloc">Bloc ' + (n++) + '<ul class="lvl3"></ul></li>' );
        }
      });
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

27/08/2015, 08h36
Nighthawk

J'ai remarqué que tu utilisais jQuery ui dans ton code. Comme je ne l'utilise pas dans mon code, je me suis dit que ça pouvais peut être venir de là?
27/08/2015, 09h43
SpaceFrog

Sans UI
http://jsfiddle.net/fwcee8en/
27/08/2015, 09h47
Nighthawk

Ah... Bah je ne comprends pas où je me suis trompé alors. Peut être un problème dans mon DOM... :weird: