Sélectionner x éléments HTML, en faire 1 groupe et le placer dans une div

Bonjour à tous et à toutes,

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

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

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

---

$(".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 ;)

Salut,

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

Sinon une possibilité en JS pur :

Code:

---

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

Bonjour,

si on veut respecter la structure Bootstrap :

Code:

---

1 2 3

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

---

il faudrait :

Code:

---

group.className = "evenements row";

---

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

Code:

---

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

---

* ou "container-fluid"

Bonjour,

Merci à tous les 2 :merci:

Citation:

---

Envoyé par Beginner.

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:

---

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

Bonjour,

Code:

---

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

---

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

Code:

---

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

---

8-)

Citation:

---

Envoyé par spip93

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

---

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

Citation:

---

Envoyé par spip93

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

---

:merci: 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 ;):ccool:
Excellente journée à vous ;)