Probleme selection ekement js
Résolu
bonjour j'essai de selectionner et de changer de place mes element mais je n'y arrive pas
<body>
<header class="site-header">
....
</header>
<main class="site-content">
<div class="content-wrapper">
<article class="product-item product-item-featured">
<figure class="product-image">
<img src="..\assets\img\photo-1442544213729-6a15f1611937.jpg" alt="Kebumen">
</figure>
<h1 class="product-title text-ellipsis">Kebumen, au coeur de l'Indonésie</h1>
<p class="product-category">Indonésie</p>
</article>
<article class="product-item">
<figure class="product-image">
<img src="..\assets\img\photo-1501594907352-04cda38ebc29.jpg" alt="Baie de San francisco">
</figure>
<h1 class="product-title">La baie de San Francisco</h1>
<p class="product-description">Découvrez son pont rouge flamboyant, ses tramways, une baie étincelante
et des rues bordées d'élégantes maisons victoriennes.</p>
<p class="product-category">Amérique du Nord</p>
</article>
const item1 = document.querySelector (".product-item");
const item2 = document.querySelector (".product-item");
document.body.insertBefore (item1, item2);
5 réponses
-
ModérateurBonjour
Tu essaies d'insérer l'élément devant lui-même ??
Du moins, c'est ce que ton code essaie de faire...
-
-
Modérateur@lwdu76Tu veux déplacer tes articles où ça ?
-
-
Comment je peux les faire bouger avec des addListenerEvent (move x
) ?-
ModérateuraddListenerEvent sert à attacher un événement sur un élément de ta page comme par exemple la détection d'un clic dessus.
Move,,, n'est pas un événement que l'on peut attacher...
Il va vraiment falloir que tu sois beaucoup plus précis dans tes explications concernant ce que tu veux réaliser... -
@jordane45je dois changer de place (alterner) les articles qui sont stockées dans des classes product-item comme l'article kebumen avec san Francisco
-
Modérateur@lwdu76Les alterner... C'est à dire ?
Tous tes produits sont sous la forme<article class="product-item product-item-featured">
Je ne sais pas si c'est que je ne suis pas encore bien réveillée... Mais ce n'est toujours pas clair... -
@jordane45j'ai cette consigne "Ecrivez une fonction dont le rôle est de réordonner de façon aléatoire les différents voyages présents sur la page en respectant la mise en page. Elle doit se jouer lorsque le DOM est complètement chargé."
-
@jordane45j'ai' une seule balise de ce style <article class="product-item product-item-featured"> et le reste est de la forme <article class="product-item>
-
-
Modérateur
il m'affiche bien tous mes items
Oui, car tu as bien plusieurs articles ....
Donc, maintenant que tu les as dans ta variables .. i lfaut boucler dessus pour les traiter...
et appliquer un "random" sur ta liste pour les mettre dans un ordre aléatoire..
https://www.google.com/search?q=javascript+Randomizing+the+display+order+of+content-
-
Modérateur@lwdu76tu fais une boucle comme tu veux...
for
forEach
while ..
Après.. si tu regardes dans le lien que je t'ai donné .. tu trouveras des exemples... -
@jordane45
const element = document.querySelectorAll("article.product-item"); Function bouge (){ for (element= 0; element < 7; element++) { element++; console.log(element); } Return bouge(); console.log (bouge()); var random = Math.floor (Math.random() * element.length); element.hide().eq(random).show(); /*version 2*/ var random = Math.floor (Math.random() * $('.product-item').length); $('.product-item').hide().eq(random).show(); }
EDIT : Correction des balises de CODE -
@lwdu76J´ai fait ceci
-
-
Modérateurdéjà, pourquoi mélanger du jquery et du "pure" js ?
Ensuite, là tu ne déplaces rien.. tu affiches/masques seulement... toujours au même endroit...
En plus, tu n'as pas mis ton code dans la boucle ... ni même dans ta fonction... donc.. en gros.. ça ne sert à rien..
Tiens.. voila un exemple ( que tu aurais pu trouver en regardant les liens qui se trouvent dans celui que je t'ai donné... )
https://codepen.io/dimayakovlev/pen/VmxOYM -
sujet resolue
