Discussion :

[Ikaly]

Bonjour à tous,

Je bloque sur un léger problème en jquery.

Code html :

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

1
2
3
4
<ul>
<li>text1</li>
<li class="sep">text2</li>
</ul>

Je souhaite scinder en 2 ul à chaque fois qu'on rencontre la class "sep"

ce qui donnerait :

Code html :

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

1
2
<ul><li>text1</li></ul>
<ul><li>text2</li></ul>

J'ai essayé avec :

Code :

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

$('.sep').replaceWith( "</ul><ul><li>" );

sauf que ça donne ça :

Code html :

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

1
2
3
4
5
<ul>
<li>text1</li>
<ul><li></li></ul>
<li>text2</li>
</ul>

Avez vous une idée ? merci

[danielhagnoul]

Bonjour

La solution simple - $( "li.sep" ).before( "</ul><ul>" ); - ne fonctionne pas, car le navigateur la corrige automatiquement en "<ul></ul>".

Le plus simple sera donc de mettre chaque "li" dans un "ul" :

Code :

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

1
2
3
$( "li.sep" ).parent().children().each( function( i, item ){
	$( item ).wrap( "<ul></ul>" );
});

[NoSmoking]

Bonjour,
autre approche, mais je ne crois pas que cela soit ce que tu souhaites car je n'en vois pas l'intérêt!

Code :

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

1
2
3
4
var oParent = $('.sep').parent();
var oElem = $('.sep');
oParent.after( oElem);
oElem.wrap('<ul></ul>');

mais je pense qu'il faudra intégrer une boucle car la structure sera surement plus complexe.

Interrogement !!
Pourquoi ne pas faire cela directement dans le HTML?

[Ikaly]

merci pour vos réponses, je vais tester ça demain

L'objectif c'est d'avoir des listes propres pour google et de pouvoir les présenter en colonne pour l'utilisateur.

[NoSmoking]

L'objectif c'est d'avoir des listes propres ...

bien que faisable en javascript, il est préférable de le faire directement dans le HTML, tiens je me répètes.

...de pouvoir les présenter en colonne pour l'utilisateur.

le CSS est là pour t'aider.

[Ikaly]

Le css ne peut pas t'aider à faire ça sauf en css3 mais tu exclus direct les navigateur ie < 10 . Ce qui n'est clairement pas le but, du coup reste le js comme ultime solution.