Javascript 根据Jquery框中提到的文本更改类名

我正在尝试更改当前的类名前缀

以下是我的html的外观：

<div class="add_multi_category_block">
   <div class="form-group">
      <div class="col-md-2">
         <a id="add_category" class="control-label  add_category">Add multiple category</a>
      </div>
      <div class="col-md-10">
      </div>
   </div>
   <div class="form-group main_category">
      <div class="col-md-1 rowCountNumber" style="text-align: right;">0</div>
      <div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
      <div class="col-md-1"><a class="add_sub_category main_category0 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
      <div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
   </div>
   <div class="form-group main_category">
      <div class="col-md-1 rowCountNumber" style="text-align: right;">1</div>
      <div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
      <div class="col-md-1"><a class="add_sub_category main_category1 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
      <div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
   </div>
   <div class="form-group sub_category_1">
      <div class="col-md-2 rowCountNumber" style="text-align: right;">1.0</div>
      <div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
      <div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
      <div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
   </div>
   <div class="form-group sub_category_1">
      <div class="col-md-2 rowCountNumber" style="text-align: right;">1.1</div>
      <div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
      <div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
      <div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
   </div>
</div>

以此类推……下面的数字也是如此。因此，目前我使用下面的代码删除一个父项下的所有子项

下面是它的样子

$(document).on('click', '.remove_category', function(){
    var parentRowCount = $(this).closest('.form-group').find('.rowCountNumber').html();
    var subCategory = parentRowCount.replace(/[ .]/g, "_");

    $(this).closest('.form-group').remove();
    $("*[class*='sub_category_"+subCategory+"']").remove();


    var i = 0;
    $('.main_category').each(function(){
        $(this).find('.rowCountNumber').html(i);  /*----------This will change the number of outer columns but not of the childs -------*/ 
        i++;
    });
});

有没有办法将所有子级同时重命名为所有子级

为了您的理解，我在这里添加了一个屏幕截图，向您展示复杂性是如何增加的

---

谢谢大家!

您只需对所有子级别元素执行另一个循环并更改编号。以下是相关代码更改

$('.main_category').each(function(i,v){  // added "i" for index value
   var previousNumber = $(this).find('.rowCountNumber').html(); // gets you the old number
   var subClassName = 'sub_category_'+ previousNumber;  // get the possible sub element class names

   $(this).find('.rowCountNumber').html(i);

   $('.add_multi_category_block [class="'+ subClassName +'"]').each(function(subIndex,elem){
      $(elem).removeClass(subClassName).addClass('sub_category_' + i);
      $(elem).find('.rowCountNumber').html( i + '.' + subIndex );
   });

  //i++; not required as the default callback provides you the index value.
});

注意：我也改变了某些代码以获得更好的性能，你可以考虑的其他变化是

而不是

$（“*[class*='sub_category_uu“+subCategory+”]）。删除（）使用

$（“.add_multi_category_block[class='sub_category_'+subCategory+”]）。remove（）
这将限制jquery仅在指定的父div
内搜索。添加多类别块
您只需对所有子级别元素执行另一个循环并更改编号即可。以下是相关代码更改

$('.main_category').each(function(i,v){  // added "i" for index value
   var previousNumber = $(this).find('.rowCountNumber').html(); // gets you the old number
   var subClassName = 'sub_category_'+ previousNumber;  // get the possible sub element class names

   $(this).find('.rowCountNumber').html(i);

   $('.add_multi_category_block [class="'+ subClassName +'"]').each(function(subIndex,elem){
      $(elem).removeClass(subClassName).addClass('sub_category_' + i);
      $(elem).find('.rowCountNumber').html( i + '.' + subIndex );
   });

  //i++; not required as the default callback provides you the index value.
});

注意：我也改变了某些代码以获得更好的性能，你可以考虑的其他变化是
而不是
$（“*[class*='sub_category_uu“+subCategory+”]）。删除（）使用

$（“.add_multi_category_block[class='sub_category_'+subCategory+”]）。remove（）
这将限制jquery仅在指定的父div
内搜索。添加多类别块
否没有错误。但逻辑是错误的。因为我可以有多个级别的child，所以它可以正确地删除行，但是下面的同一级别没有更新。@user3201500哦！！我很抱歉。。。您可以创建一个JSFIDLE吗？这样我就可以在那里测试我的代码并得到正确的解决方案？当然，我也在尝试这样做。所以我们可以找出更好的解决方案。@user3201500天哪，你有很多层次的深度…：o那么我需要改变逻辑。。我只看了一个层次的深度。。此外，这也可能意味着我们需要采取不同的方法，而不仅仅是依赖于html中的类名和编号。请点击这个JSFIDLE链接。这对它的外观没有很好的看法。但是你会了解它的功能。不，没有错误。但逻辑是错误的。因为我可以有多个级别的child，所以它可以正确地删除行，但是下面的同一级别没有更新。@user3201500哦！！我很抱歉。。。您可以创建一个JSFIDLE吗？这样我就可以在那里测试我的代码并得到正确的解决方案？当然，我也在尝试这样做。所以我们可以找出更好的解决方案。@user3201500天哪，你有很多层次的深度…：o那么我需要改变逻辑。。我只看了一个层次的深度。。此外，这也可能意味着我们需要采取不同的方法，而不仅仅是依赖于html中的类名和编号。请点击这个JSFIDLE链接。这对它的外观没有很好的看法。但是您将了解其功能。请使用jsfiddle.net/hL6jqryz这个jsfiddle链接。这对它的外观没有很好的看法。但是您将了解其功能。请使用jsfiddle.net/hL6jqryz这个jsfiddle链接。这对它的外观没有很好的看法。但您将了解其功能。