Probleme selection ekement js

Résolu/Fermé

lwdu76 Messages postés 68 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 68 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);

A voir également:

Probleme selection ekement js
Selection verrouillée word ✓ - Forum Word
L'indice n'appartient pas à la sélection vba ✓ - Forum Programmation
Illustrator cadre de sélection disparu ✓ - Forum Illustrator
Vous ne pouvez pas apporter cette modification car la sélection est verrouillée ✓ - Forum Word
Problème sélection texte word mac - Forum MacOS

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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...

lwdu76 Messages postés 68 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

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > lwdu76 Messages postés 68 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 ?

Réponse 2 / 5

lwdu76 Messages postés 68 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
) ?

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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...

lwdu76 Messages postés 68 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 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

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

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

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>

Réponse 3 / 5

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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

lwdu76 Messages postés 68 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 ?

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

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

lwdu76 Messages postés 68 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022 > lwdu76 Messages postés 68 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 11:25

J´ai fait ceci

Réponse 4 / 5

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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

lwdu76 Messages postés 68 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

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

Posez votre question

Réponse 5 / 5

lwdu76 Messages postés 68 Date d'inscription samedi 16 janvier 2021 Statut Membre Dernière intervention 8 novembre 2022
4 juil. 2022 à 14:11

sujet resolue

Discussions similaires

"L'indice n'appartient à la sélection" + VBA

Javascript Arrondi à 2 chiffres après la virgule

Outil sélection Adobe Illustrator

code couleur associé a une image

Excel: Retourner une sélection

Discussions similaires

Newsletters