JQuery删除元素之后，重新排序

一、将阿拉伯数字(1 2 3...)转为汉字数字(一 二 三...)后排序

//开始转换
function convertToChinese(num) {
  var N = [
    "零", "一", "二", "三", "四", "五", "六", "七", "八", "九"
  ];
  var str = num.toString();
  var len = num.toString().length;
  var C_Num = [];
  for (var i = 0; i < len; i++) {
    C_Num.push(N[str.charAt(i)]);
  }
  return C_Num.join('');
}

//删除操作
$(document).off("click",".J_del_type").on("click",".J_del_type",function(){
  var queType = $(this).closest(".edit-mc-item").attr("q_t");
  $('.mdc_mrtpm_Left .paper-part[q_t="'+queType+'"]').remove();
  $(this).closest(".edit-mc-item").remove();

  $(".mdc_mrtpm_Right .edit-mc-item").each(function(){
    var thisIndex = $(this).index();
    var newNum = Number(thisIndex) + Number(1);
    var newNumText = tools.convertToChinese(newNum);
    //1 2 3 4 5...
    $(this).attr("n_m",newNum);
    //一 二 三 四 五...
    $(this).find(".mrtpm_queNum").html(newNumText+"、");
  });
});

效果图：

原图
删除后的图片

二、阿拉伯数字(1 2 3 4 5...)转换为拉丁文(Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ...)后排序

拉丁文数字就是罗马数字，罗马数字是阿拉伯数字传入之前使用的一种数码。其采用七个罗马字母作数字，即Ⅰ（1）、X（10）、C（100）、M（1000）、V（5）、L（50）、D（500）。

• 个位数举例
  Ⅰ－1、Ⅱ－2、Ⅲ－3、Ⅳ－4、Ⅴ－5、Ⅵ－6、Ⅶ－7、Ⅷ－8、Ⅸ－9
• 十位数举例
  Ⅹ－10、Ⅺ－11、Ⅻ－12、XIII－13、XIV－14、XV－15、XVI－16、XVII－17、XVIII－18、XIX－19、XX－20、XXI－21、XXII－22、XXIX－29、XXX－30、XXXIV－34、XXXV－35、XXXIX－39、XL－40、VL－45、XLIX（IL）－49、L－50、LI－51、LV－55、LX－60、LXV－65、LXXX－80、XC－90、XCIII－93、VC－95、VCIII－98、VCIV（IC）－99
• 百位数举例
  C－100、CC－200、CCC－300、CD－400、LDXL（XD）－490、LDVL（VD）－495、LDVLIV（ID）－499、D－500、DC－600、DCC－700、DCCC－800、CM－900、CMXCIX（IM）－999
• 千位数举例
  M－1000、MC－1100、MCD－1400、MD－1500、MDC－1600、MDCLXVI－1666、MDCCCLXXXVIII－1888、MDCCCXCIX（MDCCCIC）－1899、MCM－1900、MCMLXXVI－1976、MCMLXXXIV－1984、MCMXC（MXM）－1990、MM－2000、MMMCMXCIX（MMMIM）－3999

最常见的罗马数字就是钟表的表盘符号

钟表

//开始转换
function convertToLatin(num) {
  var N = [
    "Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ"//目前只支持10个，还需要其它的话，一直往后添加即可
  ];
  var str = num.toString();
  var len = num.toString().length;
  var C_Num = [];
  for (var i = 0; i < len; i++) {
    C_Num.push(N[str.charAt(i)]);
  }
  return C_Num.join('');
}

//新增分卷（只能10个）
$(document).off("click",".J_new_vol").on("click",".J_new_vol",function(){
  var thisNum = $(".J_type_hd:last-child").attr("n_m");
  var newNum = Number(thisNum) + Number(1);
  var thisNewNum = tools.convertToLatin(newNum);

  var subLength = $(".mdc_mrtpm_Right .edit-handle-hd.J_type_hd").length;
  if(subLength > 9){
    tools.warning(2,"最多允许10个分卷",$("body"))
  }else{
    //左边
    var isSubsection = $(".mrtpm_IsSubsection_LI .comm-checkbox input").attr("p_a");
    if(isSubsection == 1){
      var _isSubsectionHide = "";
    }else{
      var _isSubsectionHide = "hide";
    }
    var _html1 = '<div class="paper-part">'+
      '<div class="paper-vol-wrap '+_isSubsectionHide+'" n_m="'+newNum+'">'+
        '<div class="paper-title">'+
          '<h2>'+
            '<span class="edit-text contenteditable-part mdc_mrtpm_subName_e">第'+thisNewNum+'卷 XXX</span>'+
            '<input type="text" class="hide" name="mdc_mrtpm_subName" value="第'+thisNewNum+'卷 XXX" maxlength="50" autocomplete="off">'+
          '</h2>'+
           '<div class="paper-vol-btns cfx del-paper-vol-btns">'+
              '<a href="javascript:;" class="paper-vol-btn J_del_vol" title="删除分卷">删除</a>'+
             '</div>'+
          '</div>'+
       '</div>'+
     '</div>';
    $(".mdc_mrtpm_Left .paper-part:last-child").after(_html1);
    //右边
    var _html2 = '<div class="edit-handle-hd J_type_hd" n_m="'+newNum+'" title="第'+thisNewNum+'卷 XXX">'+
      '<span class="J_type_hd-title">第'+thisNewNum+'卷 XXX</span>'+
      '<div class="dash-line"></div>'+
    '</div>';
    $(".mdc_mrtpm_Right .edit-handle-hd.J_type_hd:last-child").after(_html2);
  }
});

效果图：

新增分卷