Discussion :

[zup17]

Bonjour,

Je débute en JQUERY, je travail sur un site qui est sur WORDPRESS.
Dans le site j'utilise un plugin "modal portfolio", j'ai créer un portfolio avec image, titre et description.

Fonctionnement du portfolio: J'ai mon portfolio avec mes vignettes et quand je clique sur une vignette la pop up
s'ouvre avec mon image, mon titre et ma description.

Les informations titre et description s'affiche dans la pop up et je souhaiterais afficher la description sur
la page ou j'ai mes vignettes de mon portfolio.

Ma question est en JQUERY on peut cloner ou dupliquer du contenu avec les balises pour l'afficher dans un autre conteneur.
Je souhaiterais dupliquer ou cloner ma balise description qui est dans ma pop up voilà la balise:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal-pf-content"><p>ok test ok</p></div>

Et je souhaiterais l'afficher à côté de ma vignette sur ma page portfolio dans la balise:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="1611-1"> </div>

Qui donnerais avec la duplication ou clone JQUERY:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="1611-1"> 
 
   <--!ma vignette est déjà là -->
 
   <div class="modal-pf-content"><p>ok test ok</p></div>
 
</div>

J'ai fait des tests qui n'ont pas fonctionné, je dois mal utiliser JQUERY !!
Pouvez vous me dire comment faire ?? je cale, peut être qu'il ne faut pas utiliser duplication ou clone JQUERY.

Merci d'avance pour votre aide !!

[Toufik83]

bonsoir,
oui effectivement, on peux cloner des éléments html avec $.clone() mais avec des conditions.
la plus importante parmi ces conditions est de ne pas avoir deux ou plusieurs éléments avec LE MÊME ID dans une page html.
si par exemple tu as un

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='identificateur'></div>

puis tu la clone avec $("#identificateur").clone(), t'auras deux div avec le même id.
solution : soit ne pas utiliser des id, soit a chaque fois qu'on clone un élément, on change juste après son id.

[zup17]

Merci de ta réponse.
Ok alors c'est bien clone qui faut utiliser, le conteneur ou je souhaite faire apparaître le contenu est :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="1611-1"> </div>

Et l'ID est bien unique.

Le contenu que je clone est :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal-pf-content"><p>ok test ok</p></div>

Ce que je veux que ca donne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="1611-1"> 
   <--!ma vignette est déjà là -->
   <div class="modal-pf-content"><p>ok test ok</p></div>
</div>

Je ne clone pas :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="1611-1"> </div>

Juste:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal-pf-content"><p>ok test ok</p></div>

Pour le mettre dans la balise:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="1611-1"> </div>

Qui donnera:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="1611-1"> 
   <--!ma vignette est déjà là -->
   <div class="modal-pf-content"><p>ok test ok</p></div>
</div>

Je sais pas si tu comprends mon explication !?

J'ai regardé sur le site de jquery le clone !! Si j'ai bien compris je dois utiliser ça ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script src="jquery.js"></script>
 
    <script>
 
      $(function() {
 
       $( ".modal-pf-content p" ).clone().appendTo( "#1611-1" );
 
        }); 
 
    </script>

Merci de ton aide !!

[Toufik83]

si tu veux juste cloner la div

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="modal-pf-content"><p>ok test ok</p></div>

et la mettre dans

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="1611-1"> </div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="1611-1"> </div>
<div class="modal-pf-content"><p>ok test ok</p></div>
<button id="cloner">Cloner</button>

le script jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#cloner").click(function(){
	var cloned=$(".modal-pf-content").clone().appendTo($("#1611-1"));
});

[zup17]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="1611-1"> </div>
<div class="modal-pf-content"><p>ok test ok</p></div>
<button id="cloner">Cloner</button>

Je veux le mettre dans la div et pas à côté !! Comme cela et pas comme ton exemple au dessus:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="1611-1"> <div class="modal-pf-content"><p>ok test ok</p></div> </div>

Pourquoi il y a un bouton ?? Le clone ne fonctionne qu'avec le clic ??

le script jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("#cloner").click(function(){
	var cloned=$(".modal-pf-content").clone().appendTo($("#1611-1"));
});

En faites il faudrait que ça sois pas au clic, mais automatiquement !!

Je te remercie de ton aide et de ta patience !!

[Toufik83]

l'exemple que j'ai mis en dessus été juste un petit exemple pour te montrer comment le $.clone() se comporte.
bien-sure que tu peux le faire AUTOMATIQUEMENT, mais je dois d'abord comprendre ce que ça veux dire AUTOMATIQUEMENT pour toi.
au chargement de la page? ou bien a chaque événement bien précis? ou autre chose ...?
pour le faire a chaque chargement de la page tu peux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).ready(function(){
var cloned=$(".modal-pf-content").clone().appendTo($("#1611-1"));
});

[zup17]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).ready(function(){
var cloned=$(".modal-pf-content").clone().appendTo($("#1611-1"));
});

Bonjour Toufik83,

Désolé j'ai pas pu te répondre avant aujourd'hui !! J'ai eu un soucis familiale (décès) dans la famille !!
Ce que je veux dire par automatiquement !! Quand on arrive sur la page le contenu est déjà cloner !!
Je pense que ton code doit faire cela ??

Merci mille de ton aide !!
Je commence à comprendre avec tes explications, c'est cool

[Toufik83]

bonsoir,
tout d'abord, toutes mes condoléances pour votre perte familiale.
le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function(){
/*ton code ici*/
});

se déclenche quand le DOCUMENT EST PRÊT, cela veux dire à chaque chargement de la page, le code sera exécuté.