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

**Nighthawk** · 25/08/2015, 13h54

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 25/08/2015, 14h01

En factorisant ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou avec le selecteur commence par ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 25/08/2015, 21h38

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

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Nighthawk** · 26/08/2015, 09h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**danielhagnoul** · 26/08/2015, 22h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Nighthawk** · 27/08/2015, 08h36

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager