Discussion :

[spip93]

Bonjour à tous et à toutes,

J'ai une div Agenda contenant un titre et 12 blocs/éléments/événements :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="agenda">
    <h2>Agenda</h2>
    <div class="col-md-4">
        <div class="contenu-1">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-2">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-3">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-4">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-5">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-6">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-7">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-8">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-9">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-10">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-11">Contenu</div>
    </div>
    <div class="col-md-4">
        <div class="contenu-12">Contenu</div>
    </div>
</div>

Je souhaiterais (dans l'ordre)
- sélectionner toutes mes div avec la classe "col-md-4"
- les regrouper dans 1 seul groupe
- placer ce groupe dans une div avec, par exemple, la classe "evenements"

J'ai voulu faire ceci :

Code :

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

$(".agenda .col-md-4").wrap('<div class="evenements"></div>');

mais le problème (les "pros" comme vous auront tout de suite compris) c'est que ça place CHAQUE div avec la classe "col-md-4" dans une div avec la classe "evenements"

(Sachant que je n'ai pas la main sur le HTML et que je ne peux passer que par un script Javascript ou jQuery) Comment faire pour que toutes mes div avec la classe "col-md-4" ne fasse qu'un seul groupe pour ensuite le placer dans une div avec la classe "evenements" ?

D'avance merci beaucoup pour vos réponses

Bonne journée

[Beginner.]

Salut,

C'est pratiquement la div de class agenda alors pourquoi ne pas juste changer la class ?

Sinon une possibilité en JS pur :

Code javascript :

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

1
2
3
4
5
6
7
8
let divs = document.querySelectorAll(".agenda .col-md-4")
let group = document.createElement("div")
group.className = "evenements"
 
for (let elem of divs) {
    group.appendChild(elem)
}
document.body.appendChild(group)

Tu peux le convertir en JQuery...

[jreaux62]

Bonjour,

si on veut respecter la structure Bootstrap :

Code html :

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

1
2
3
<div class="container">
  <div class="row">
    <div class="col-xxx-xx">

il faudrait :

Code js :

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

group.className = "evenements row";

et, éventuellement (si la class "container" * n'existe pas déjà parmi les "parents") :

Code js :

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

document.querySelector(".agenda").classList.add("container");

* ou "container-fluid"

[spip93]

Bonjour,

Merci à tous les 2

C'est pratiquement la div de class agenda alors pourquoi ne pas juste changer la class ?

Parce que 1) j'ai beaucoup simplifié mon code d'exemple (en vrai, il y a d'autres éléments au même niveau que le titre, comme des filtres pour filtrer les éléments) et surtout 2) (comme je l'expliquais à la fin de mon message) je n'ai pas la main sur le HTML.

Merci bien Jreaux62. Effectivement, c'est bien mieux en respectant la structure Bootstrap

Beginner, désolé, mais ça fonctionne à 90%.
Pour faire court, ça coince à la dernière ligne de code quand ça l'ajoute à l'élément body :

Code :

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

document.body.appendChild(group)

car ça a pour effet de me placer mes éléments sous le pied de page.

Comment faire pour que ça s'ajoute à la div qui a la classe "dp-node-agenda" ?

Encore merci

Bonne journée

[jreaux62]

Bonjour,

Code :

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

document.querySelector(".dp-node-agenda").appendChild(group);

En jQuery, tout ça se résume à :

Code js :

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

$(".dp-node-agenda").addClass('row').append( $(".agenda .col-md-4") );

[Beginner.]

Beginner, désolé, mais ça fonctionne à 90%.

Ben en fait le code fait ce que tu as demandé :

Je souhaiterais (dans l'ordre)
- sélectionner toutes mes div avec la classe "col-md-4"
- les regrouper dans 1 seul groupe
- placer ce groupe dans une div avec, par exemple, la classe "evenements"

...
Comment faire pour que toutes mes div avec la classe "col-md-4" ne fasse qu'un seul groupe pour ensuite le placer dans une div avec la classe "evenements" ?

[spip93]

Merci à tous les 2; je viens de tester (désolé, je ne suis pas chez moi cette semaine. C'est pour ça que je réponds tardivement) ça fonctionne très bien
Excellente journée à vous