[jQuery] Comment remplacer une balise html

Bonjour à tous,

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

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

<ul><li>text1</li></ul>
<ul><li>text2</li></ul>

J'ai essayé avec :

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

sauf que ça donne ça :

<ul>
<li>text1</li>
<ul><li></li></ul>
<li>text2</li>
</ul>

Avez vous une idée ? merci
Modifié par ika (12 Jul 2013 - 09:25)

Je ne vois pas bien l'intérêt mais bon .. Tu ne pourras pas le faire en une ligne çà c'est sur.

Il faut que tu parcoures tes balises "li" et que tu reconstitues en même temps l'HTML final suivant tes conditions imposées

Exemple

$('li').each(function(){
   if($(this).hasClass('sep'){
      html = html+'</ul><ul>';
   }
   html=html+'<li>'+$(this).text()+'</li>';
});

Modifié par mini-truc (12 Jul 2013 - 14:19)

Merci pour ta réponse c'est une bonne piste, j'ai essayé ton code mais ça ne fonctionne pas. Doit manquer un truc... c'est quand même étrange qu'on ne puisse pas faire ça en une ligne non ?

Sinon pour le but c'est de pouvoir conserver une liste ul propre au regard des moteurs de recherches, et d'afficher en colonne visuellement pour l'internaute, les solutions css 3 n'étant pas compatibles avec les ie < à 10
Modifié par ika (12 Jul 2013 - 14:39)

AAAh tu veux parapher ? Je vois l'utilité maintenant !

C'est possible que mon code marche pas je l'ai écrit à la va vite sur le forum juste pour te donner une idée ; quelle erreur as tu en console ?

il manquait quelques parenthèses mais même avec ça corrigé rien ne se passe...

Ta ligne :

html=html+'<li>'+$(this).text()+'</li>';

je comprend pas normalement on c'est ici qu'on devrait réécrire le html ? du coup ne serait ce pas :

$(this).html(html+'<li>'+$(this).text()+'</li>');

Enfin un truc du genre ?

Non du tout à la ligne la je prend le contenu du li en cours

C'est après le each que je vais faire $('ul').html(html);

j'ai ça comme erreur sur cette ligne :


ReferenceError: html is not defined
[Stopper sur une erreur]

html=html+'<li>'+$(this).text()+'</li>';

Voilà j'ai réussi à base de ton script merci à toi

pour ceux que ça intéresse :

$('ul').each(function(){
	parent = $(this).parent();
	html = '';
	$('li',this).each(function(){
		if($(this).hasClass('sep')){
			html = html+'</ul><ul>';
		}
		html = html+'<li>'+$(this).html()+'</li>';
	});
	html='<ul>'+html+'</ul>';
	parent.html(html);
});

Modifié par ika (12 Jul 2013 - 15:25)