Dupliquer partiellement le contenu de <li> et rajouter une balise

**NewB** · 07/12/2011, 09h38

Bonjour,

Je débute en JQuery et je me retrouve bloqué sur un bout de code.
J'aimerai dupliquer le contenu d'une liste <ul> dans une autre <ul>
mais sans reprendre tout le contenu et en rajoutant une balise.

Un pti bout de code sera plus parlant

Je voudrai dupliquer tous les "li" de la liste "id1" :
la liste "id1" ne doit pas être modifée

Code :

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

1
2
3
4
5
6
 
<ul id="id1">
<li><span class="span1">Ligne 1</span><span class="span2">Ligne 1 Span 2</span><span class="span3">Ligne 1 Span 3</span></li>
<li><span class="span1">Ligne 2</span><span class=".span2">Ligne 2 Span 2</span><span class="span3">Ligne 2 Span 3</span></li>
<li><span class="span1">Ligne 3</span><span class="span2">Ligne 3 Span 2</span><span class="span3">Ligne 3 Span 3</span></li>
</ul>

dans cette liste "id2" avec quelques modif :

Code :

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

1
2
3
4
5
6
 
<ul id="id2">
<li><a href="#">test</a><span class="span2">Ligne 1 Span 2</span></li>
<li><a href="#">test</a><span class="span2">Ligne 2 Span 2</span></li>
<li><a href="#">test</a><span class="span2">Ligne 3 Span 2</span></li>
</ul>

J'ai écrit un début de code, il me faut maintenant dupliquer la balise .span2
avec clone je suppose ? mais je n'y arrive pas. Ca me retourne toujours un "Objet" et non pas le contenu. Il doit y avoir un moyen simple mais je ne vois pas lequel.
De plus j'utilise cette méthode de tableau pour faire le append et je me demande s'il n'y a pas plus simpe ?

Code :

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

1
2
3
4
5
6
 
$("#id1 li").each(function()
{
var balises = [ '<li><a href="#">test</a>\n', 'SPAN2 A DUPLIQUER ICI\n', '</li>' ]; 
$('#id2').append(balises.join('')); 
});

D'avance merci de votre aide.

**SpaceFrog** · 07/12/2011, 10h16

Attention !!!
une classe ne commence pas par un point !!!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type='text/javascript'>
 $(function(){
$('#id1 li .span1, #id1 li .span3').remove()
$('#id1 .span2').before('<a href="#">test</a>')
 
})
 </script>
</head>
<body>
<ul id="id1">
<li><span class="span1">Ligne 1</span><span class="span2">Ligne 1 Span 2</span><span class="span3">Ligne 1 Span 3</span></li>
<li><span class="span1">Ligne 2</span><span class="span2">Ligne 2 Span 2</span><span class="span3">Ligne 2 Span 3</span></li>
<li><span class="span1">Ligne 3</span><span class="span2">Ligne 3 Span 2</span><span class="span3">Ligne 3 Span 3</span></li>
</ul>
</body>
</html>

**NewB** · 07/12/2011, 10h43

Envoyé par SpaceFrog

Attention !!!
une classe ne commence pas par un point !!!

Ouulaaa !! oui, j'ai fais du copier/coller un peu trop rapide. J'ai édité mon 1ier post.

Merci pour ta réponse, mais ce n'est pas tout à fait ce que je voulais faire.

J'aimerai que la list "id1" ne soit pas modifié, il faut que le contenu de la list "id1"
soit dupliqué dans la liste "id2" avec les modifications indiquées.

**SpaceFrog** · 07/12/2011, 11h10

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type='text/javascript'>
 $(function(){
var newUl=$('#id1').clone().attr('id','id2')
newUl.find('li .span1, li .span3').remove()
newUl.find('.span2').before('<a href="#">test</a>')
$('#id1').after(newUl)
})
 </script>
</head>
<body>
<ul id="id1">
<li><span class="span1">Ligne 1</span><span class="span2">Ligne 1 Span 2</span><span class="span3">Ligne 1 Span 3</span></li>
<li><span class="span1">Ligne 2</span><span class="span2">Ligne 2 Span 2</span><span class="span3">Ligne 2 Span 3</span></li>
<li><span class="span1">Ligne 3</span><span class="span2">Ligne 3 Span 2</span><span class="span3">Ligne 3 Span 3</span></li>
</ul>
</body>
</html>

**NewB** · 07/12/2011, 11h15

il me semblait bien que c'était tout bete ^^ , je m'obstinais dans la mauvaise
direction !

merci pour ta réponse

Dupliquer partiellement le contenu de <li> et rajouter une balise

jQuery

Vue hybride

Discussions similaires

Partager

Partager