Manipulation du dom en javascript
Bonjour à la communauté !
Voici mon problème :
J'ai ce code html :
<div class="container">
<span class="article_number row">2</span>
<span class="article_title row">La maison Rover</span>
<span class="article_thumb row">
<span>
<img src="photos/image-min.png" alt="Miniature de la maison rover">
</span>
</span>
<span class="article_infos row">
<a class="fa fa-info-circle " href="#"></a>
</span>
<span class="article_text row">
<a class="fa fa-align-left" href="#"></a>
</span>
<span class="article_photos row">
<a class="fa fa-camera" href=""></a>
</span>
<span class="article_delete row">
<a class="fa fa-trash" href="#"></a>
</span>
</div>
Je voudrais en javascript, faire une fonction qui entoure " . article_number" et ".article_title" d'une div.
et me servire en suite de cette fonction, pour l'apeller au click.
J'ai donc fait plusieurs tests, essaié plusieurs façons de faire mais je tourne en rond.
Par exemple j'ai fait ceci :
panelChange = function(element) {
var self = this;
this.element = element;
items = document.getElementsByClassName('article');
this.element.addEventListener("click", function(e){
e.preventDefault();
for(var i = 0; i < items.length; i++){
var item = items[i];
item.classList.toggle('is-panel');
self.wrapping();
}
});
}
panelChange.prototype.wrapping = function() {
var titles = document.getElementsByClassName('article_title');
var numbers = document.getElementsByClassName('article_number');
for (var i = 0; i< titles.length ; i++){
title = titles[i];
title.remove();
}
for (var i = 0; i< numbers.length ; i++){
number = numbers[i];
number.remove();
}
};
et puis je pensais ensuite réinjecter mes ".article_number" et ".article_title" dans une div.
Mais je bloque et je me dis que c'est certainement une methode a ch***.
Pouvez vous m'aiguiller sur la bone methode s'il vous plaît ? Car la je n'en peux plus de bricoler et de chercher en vains depuis 2 jours.
merci d'avance.
9 réponses
Bonjour,
C'est bon problème résolu :
le HTML :
<!-- Premier article -->
<li class="article ">
<div class="container">
<span class="article_number row">1</span>
<span class="article_title row">La maison Rover</span>
<span class="article_thumb row">
<span>
<img src="photos/image-min.png" alt="Miniature de la maison rover">
</span>
</span>
<span class="article_infos row">
<a class="fa fa-info-circle " href="#"></a>
</span>
<span class="article_text row">
<a class="fa fa-align-left" href="#"></a>
</span>
<span class="article_photos row">
<a class="fa fa-camera" href=""></a>
</span>
<span class="article_delete row">
<a class="fa fa-trash" href="#"></a>
</span>
</div>
</li>
<!-- deuxieme article -->
<li class="article ">
<div class="container">
<span class="article_number row">2</span>
<span class="article_title row">La maison Rover</span>
<span class="article_thumb row">
<span>
<img src="photos/image-min.png" alt="Miniature de la maison rover">
</span>
</span>
<span class="article_infos row">
<a class="fa fa-info-circle " href="#"></a>
</span>
<span class="article_text row">
<a class="fa fa-align-left" href="#"></a>
</span>
<span class="article_photos row">
<a class="fa fa-camera" href=""></a>
</span>
<span class="article_delete row">
<a class="fa fa-trash" href="#"></a>
</span>
</div>
</li>
Le js :
var panelChange = function(element) {
var self = this;
this.element = element;
items = document.getElementsByClassName('article');
this.element.addEventListener("click", function(e){
e.preventDefault();
for(var i = 0; i < items.length; i++){
var item = items[i];
item.classList.toggle('is-panel');
self.newDiv(item);
}
});
}
panelChange.prototype.newDiv = function(item){
this.item = item;
var div = document.createElement('div');
var childrenItems = this.item.children;
for(var i = 0; i < childrenItems.length ; i++){
var childrenItem = childrenItems[i];
elements = childrenItem.querySelectorAll('.article_title, .article_number');
for(var i = 0; i < elements.length ; i++){
div.appendChild(elements[i]);
}
childrenItem.appendChild(div);
}
};
a+
Salut,
Quelque chose dans ce goût là (non testé !) :
var elements = document.querySelectorAll('.article_number, .article_title');
Array.prototype.forEach.call(elemens, function (node) {
var wrapper = document.createElement('div');
wrapper.appendChild(node);
node.parentNode.removeChild(node);
node.parentNode.appendChild(wrapper);
});Merci pour la réponse !!!
Ce bout de code est à utiliser en état, ou dois-je remplacer node par quelque chose ?
Enfait j'ai du mal à cerner comment je dois l'implémenter
Merci effectivement la première méthode me renvoyait une erreur pour le parentNode.
J'ai testé la seconde qui renvoit ceci :
"HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy"
Pouvez vous m'expliquer la fonction que vous m'avez donnée ? Je pourrais peut-être me débrouiller tout seul par la suite.
J'ai trouvé ceci sur mdn : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach
Mais je n'y comprend pas grand chose, surtout qu"il ne parle pas du .call de la fonction.
D'après ce que je comprend, ça ajoute une methode à ma fonction qui est le parcours d'un tableau mais je ne vois pas trop comment ça marche.
Merci d'avance.
Il y a une formation JS sur le site, je t'invite à la suivre avant de continuer quoi que ce soit. Je pense que cela pourra t'être bénéfique.
https://www.grafikart.fr/formations/debuter-javascript
Merci, je l'ai déjà regardé lol ... mais entre la théorie et la pratique... passer de jquery a du javascript pur c'est un peu chaud surtout avec ce genre de bout de code qui ne me parle pas trop, c'est pourquoi j'aurais aimé étayer le peu de connaissances que j'ai avec quelques explications de plus, mais c'est déjà bien d'avoir pris le temps de te pencher sur mon problème, je comprend, merci. a +
Ben mon problème n'est pas vraiment résolu, je me dis que j'aurais peut-être une autre réponse qui me permettrait de le résoudre. Mais si je trouve la solution et que ca marche, je le passerais en résolu en mettant ce que j'ai fais.