11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Déplacer une div par ligne en jQuery

Bonjour,

J'ai un souci avec le déplacement d'une div en jQuery. Le problème étant que j'ai plusieurs lignes ayant elles mêmes plusieurs lignes qui ont les mêmes classes CSS.

J'ai donc pour le html :


<div class="ligne">
<div class="image"></div>
<div class="texte"></div>
<div class="date"></div>
</div>
<div class="ligne">
<div class="image"></div>
<div class="texte"></div>
<div class="date"></div>
</div>


Et pour le jQuery :

jQuery(document).ready(function($){
    $('.date').before($('.texte'));
});


Et donc toutes les classes "date" se placent devant toutes les classes "texte" ..!

J'ai cru comprendre qu'avec each() on pouvait faire quelque chose mais après plusieurs test que des échecs Smiley bawling

SI quelqu'un peut me débloquer ça ce serait cool ! Merci
Salut,

before() fait des clones de l'élément à insérer s'il y a plusieurs "cibles".

Personnellement, si tu as le choix, je te conseille d'éviter before(), et d'utiliser plutôt "insertBefore()", qui est, à mes yeux, plus logique.

Supposons que tu veuilles déplacer chaque div.date avant la div.texte, au sein de son conteneur (div.ligne).

Voici ce que j'écrirais (pas testé):
// On parcourt les div ligne
$(".ligne").each(function(){
    // Je récupère un objet jQuery contenant UNE div.ligne
    var maLigne = $(this); // Ici, this est l'élément DOM de la div, je la transforme en objet jQuery

    // Je suppose ici que chaque div ligne ne contient qu'un seul texte et qu'une seule date
    // Je sélectionne la date
    // .find() fonctionne comme $() mais ne recherche qu'à l'intérieur de maLigne
    var maDate = maLigne.find(".date");

    // Je sélectionne le texte
    var monTexte = maLigne.find(".texte");

    // J'insère la date avant le texte (il sera supprimé de son ancien emplacement, cf doc jQuery)
    maDate.insertBefore(monTexte);

    // Les trois lignes auraient pu être faites en une seule...
});
Salut,

Je te remercie beaucoup parce que ton script fonctionne parfaitement !

Merci aussi pour tes commentaires explicatif, j'en ai appris beaucoup ^^

Smiley ravi
J'ai trouvé aussi un script incroyable qui à l'air de bien fonctionner :

jQuery(function($){
    $('.date').each(function(){ $(this).prev().before(this); });
});
Sujet clos
Aller à