Ajout d'une ligne vide dans une position spécifique dans une liste non ordonnée avec jQuery

Question

J'ai une UL créée par PHP et jQuery UI qui ressemble à ceci:

<ul id="ml_organize"> 
<li id="il1" class="ui-state-default"><span id="add_hl1" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('1')";></span><span class="org_qty">1</span><span class="org_partno">MAS-NTWKBAYKIT</span><span class="org_desc">FLOOR MNTG HARDWARE KIT (NTWK)</span></li> 
<li id="il13" class="ui-state-default"><span id="add_hl2" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('2')";></span><span class="org_qty">1</span><span class="org_partno">ESDSTRAP</span><span class="org_desc">ADJ ELASTIC 63070</span></li> 
<li id="il12" class="ui-state-default"><span id="add_hl3" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('3')";></span><span class="org_qty">1</span><span class="org_partno">ESDLABEL</span><span class="org_desc">GREEN .75" X 1.75" ESD LABEL</span></li> 
<li id="il11" class="ui-state-default"><span id="add_hl4" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('4')";></span><span class="org_qty">1</span><span class="org_partno">SPT6224</span><span class="org_desc">SPLIT TUBE 5/8" X 24" GRAY</span></li> 

<li id="il10" class="ui-state-default"><span id="add_hl5" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('5')";></span><span class="org_qty">1</span><span class="org_partno">SAF2502</span><span class="org_desc">FRAMING CLIP ASSM AUX CHNL 5/8</span></li> 
<li id="il9" class="ui-state-default"><span id="add_hl6" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('6')";></span><span class="org_qty">1</span><span class="org_partno">TR53</span><span class="org_desc">5/8-11 THREADED ROD X 24.0"</span></li> 
<li id="il8" class="ui-state-default"><span id="add_hl7" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('7')";></span><span class="org_qty">2</span><span class="org_partno">CJB6302C</span><span class="org_desc">CLIP J-BOLT ASSM FOR 2"CR/FC</span></li> 
<li id="il7" class="ui-state-default"><span id="add_hl8" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('8')";></span><span class="org_qty">2</span><span class="org_partno">RFCH702</span><span class="org_desc">HEAVY HARDWARES(PAIR) 2.0" STGR</span></li> 
<li id="il6" class="ui-state-default"><span id="add_hl9" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('9')";></span><span class="org_qty">2</span><span class="org_partno">FBM26CB</span><span class="org_desc">FLR BASE MLDINGX26" (CB VINYL)</span></li> 

<li id="il5" class="ui-state-default"><span id="add_hl10" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('10')";></span><span class="org_qty">2</span><span class="org_partno">AFC2202DG</span><span class="org_desc">AUX CHANNEL, 4¿</span></li> 
<li id="il4" class="ui-state-default"><span id="add_hl11" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('11')";></span><span class="org_qty">1</span><span class="org_partno">601343874</span><span class="org_desc">UNI-STRUT KIT - ED8C509-50 G9 EQUIVALENT</span></li> 
<li id="il3" class="ui-state-default"><span id="add_hl12" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('12')";></span><span class="org_qty">4</span><span class="org_partno">ISS888</span><span class="org_desc">INSUL STRIP FOR BAYS-42" LONG</span></li> 
<li id="il2" class="ui-state-default"><span id="add_hl13" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('13')";></span><span class="org_qty">4</span><span class="org_partno">ICS775</span><span class="org_desc">INSUL CABLE RACK 1.5"STG 7.75"</span></li> 
<li id="il14" class="ui-state-default"><span id="add_hl14" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('14')";></span><span class="org_qty">1</span><span class="org_partno">ESD1080740001</span><span class="org_desc">ESD BANANA JACK</span></li> 

</ul> 

Comme vous pouvez le voir par la fonction onClick dans chaque " li ", je veux être anle pour cliquer sur un petit bouton à gauche de la ligne et insérer une nouvelle ligne vide dans cet espace tout en renumérotant les éléments après elle. La fonction addMLRow() passera toujours où l'élément est dans la liste, tout comme l'id de la ligne qui contient le petit bouton. L'interface utilisateur jQuery a déjà une fonction pour créer un tableau de la liste des éléments une fois qu'il est terminé, donc je peux renvoyer les données à un db et avoir des numéros de position, même pour les lignes noires.

Toute aide serait grandement appréciée !!!!

Answer 1

J'ai peur que votre solution ne fonctionne pas, car elle permet également de cliquer sur chacune des lignes ajoutées pour créer une ligne au-dessus. Les lignes d'en-tête ajouté à la onClick sont d'un format différent comme vous pouvez le voir l'extrait ci-dessous:

function addMLRow(rowNo) { 
    var newRow = "<li id=\'li" + rowNo + "\' class=\'ui-state-default\'><span class=\'item\'>HL</span><input class=\'header_line\' maxlength=\'75\' type=\'text\' name=\'hl_text[" + rowNo + "]\' id=\'hl_text" + rowNo + "\' /></li>"; 
    $('#ml_organize li:eq(' + (rowNo - 1) + ')').before(newRow); 
    $('#hl_text' + rowNo + '').focus(function() { 
     $(this).css('background','#DDD'); 
    }); 
    $('#hl_text' + rowNo + '').blur(function() { 
     $(this).css('background','#FFF'); 
    }); 
    $('#hl_text' + rowNo + '').focus(); 
    // renumber rows after insert 
    $('#ml_organize li:gt(' + (rowNo - 1) + ')').each(function() { 
     var newID = 'li' + ($(this).index() + 1); 
     $(this).attr('id',newID); 
    }); 
} 

probablement pas encore la solution la plus élégante, mais ça marche!

Answer 2

Dans votre code, votre plage et vos ID ne correspondent pas. Est-ce intentionnel? Dans tous les cas, vous n'avez pas besoin de tous les identifiants de span et de onClicks individuels.

Ce qui suit va insérer une ligne vide avant tout LI (y compris les LI vides) chaque fois qu'ils sont cliqués, sans avoir besoin de onClicks.

$('#ml_organize li').live('click', function() { 
    $(this).before('<li class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line"></span><span class="org_qty">0</span><span class="org_partno"> </span><span class="org_desc"> </span></li>'); 

}); 

Je cherche aussi à simplifier le balisage - toutes les classes répétées semblent un peu inutile quand vous pouvez simplement utiliser la classe parente pour un style CSS.