(jQuery/JS) Comment * définir * un élément de liste pour qu'il soit 1er dans une UL ou une OL quelle que soit sa commande d'origine?

Question

Je possède ce code de travail ici:

function portfolio() { 
    $('#main-projects').children().toggle(function() { 
     $(this).css('cursor', 'pointer'); 
     var projectname = $(this).attr('id'); 
     //alert(projectname); 
     projectname = projectname.replace("li-", "main-"); 
     $('.main-details').hide(); 
     $('.main-stage').fadeOut(300); 
     $('#' + projectname).delay(300).fadeIn(900); 

    }, function() { 
     //Haven't written callback yet, no worries. 
    }); 
} 

Fonctionne très bien déjà: lorsque vous cliquez sur un LI (enfant de ul#main-projects) il trouve le nom de la div diaporama caché en remplaçant le nom de l'identifiant de la LI, remplace " li- (nom du projet) "avec" main- (nom du projet) "montre alors que div. Ce que je veux aussi qu'il fasse (et que je n'arrive pas à trouver la solution) est de prendre le LI qui a été sélectionné et de le déplacer pour être le premier dans la liste à organiser pour le diaporama qui est juste été montré au-dessus d'elle.

Je sais comment saisir un numéro d'article avec eq (index) mais je n'ai rien trouvé qui force une réorganisation sans glisser-déposer. Des idées? Merci d'avance!

Answer 1

Vous pouvez utiliser insertBefore pour l'insérer avant la première li:

• http://api.jquery.com/insertBefore/

Jetez aussi un coup d'œil à cette question:

• Reordering of Divs

Answer 2

Eh bien, en supposant que votre code HTML est le même que celui que vous avez décrit, alors vous pouvez le faire simplement comme ceci:

function portfolio() { 
    $('#main-projects li').toggle(function() { 
     var projectname = this.id.replace("li-", "main-"); 
     $(this).css('cursor', 'pointer').prependTo('#main-projects'); 
     $('.main-details').hide(); 
     $('.main-stage').fadeOut(300); 
     $('#' + projectname).delay(300).fadeIn(900); 
    }, function() { 
     //Haven't written callback yet, no worries. 
    }); 
} 

Voir une simple démo ici: http://jsfiddle.net/yijiang/3zjSQ/