Maintien de la justification des éléments de bloc inline justifiés après manipulation à l'aide de jQuery

Question

J'utilise text-align: justify pour espacer uniformément les éléments du bloc inline. J'utilise jQuery pour échanger certains éléments afin qu'ils soient mieux ajustés (par exemple, remplir les lignes plus efficacement). Cependant, le navigateur ne justifie plus correctement les éléments échangés. Est-il possible de faire en sorte que le navigateur redéfinisse les éléments pour surmonter ce problème?

modifier Voici un jsFiddle montrant la question: http://jsfiddle.net/sprintstar/HKDd9/3/

Answer 1

Le problème réside dans un espace manquant entre les éléments de bloc inline. Qu'est-ce que vous manquez est le nœud texte:

$(function() { 
    var eq3 = $('.container a:eq(3)'); 
    var eq4 = $('.container a:eq(4)'); 
    eq4.before(eq3).before(" "); 
});​ 

http://jsfiddle.net/archatas/HKDd9/4/

Answer 2

J'ai une solution possible mais je ne suis pas sûr de la raison pour laquelle votre code ne fonctionne pas comme prévu. Peut-être que quelqu'un pourrait faire la lumière sur la question.

Tout d'abord eq4.before(eq3); signifie que vous le replacez là où vous l'avez choisi. Je crois que vous vouliez dire eq4.insertBefore(eq3);

J'ai essayé d'ajouter un nouvel élément et il a parfaitement fonctionné

$('<a href="#" class="sq-1"><img src="http://placehold.it/64x32" /></a>').insertBefore(eq3); 

Edit: Mais le clonage du même élément ne produit pas le même résultat.

eq4.clone().insertBefore(eq3); 
eq4.remove();