Probleme selection ekement js

Résolu/Fermé
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 - Modifié le 3 juil. 2022 à 23:11
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 - 4 juil. 2022 à 14:11
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

jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
3 juil. 2022 à 23:54
Bonjour

Tu essaies d'insérer l'élément devant lui-même ??
Du moins, c'est ce que ton code essaie de faire...
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 00:07
Je voudrais qu'il déplace les éléments qui se nomme product-item mais je suis novice en js et j'ai pas beaucoup d'idées j'ai regardé la doc des tutos mais rien ne m'est venu comme idée
0
jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704 > lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 01:26
Tu veux déplacer tes articles où ça ?
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 00:09
Comment je peux les faire bouger avec des addListenerEvent (move x
) ?
0
jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
4 juil. 2022 à 01:27
addListenerEvent 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...
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024
4 juil. 2022 à 06:59
je dois changer de place (alterner) les articles qui sont stockées dans des classes product-item comme l'article kebumen avec san Francisco
0
jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704 > lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 07:29
Les 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...
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024
4 juil. 2022 à 08:22
j'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é."
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024
4 juil. 2022 à 08:23
j'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>
0
jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
4 juil. 2022 à 09:19

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
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
Modifié le 4 juil. 2022 à 09:29
Je fais une boucle for ?
0
jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704 > lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 09:35
tu 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...
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024
Modifié le 4 juil. 2022 à 11:27
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
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 11:25
J´ai fait ceci
0
jordane45 Messages postés 38292 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
4 juil. 2022 à 11:30
dé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
0
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
Modifié le 4 juil. 2022 à 12:22
D'accord en reprenant ce code et en l'adaptant ça devrait fonctionner
Du coup dans le queryselect à l'extérieur de la fonction je met mon queryselect
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
lwdu76 Messages postés 65 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 14:11
sujet resolue
0