javascript - 根据 Jquery 框中提到的文本更改类名称

Question

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

这是我的 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>

这是使用 CSS 在 HTML 中排列时的样子，请查看下面的屏幕截图:

现在的问题是，我在这里可以有 N 级 child 。这里我只想做的是，如果我删除“0”列，那么它应该将下面的列从“1”更新为“0”，并且后续子列应该是

0
 0.0
  0.0.0
  0.0.1
 0.1

等等......还有下面的数字。因此，我暂时使用下面的代码来删除一个父级下的所有子级。

这是它的样子。

$(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++;
    });
});

有没有办法同时重命名所有子级子级的子级？

为了您的理解，我添加了另一个屏幕截图，以向您展示此处的复杂性如何增加。

谢谢!

Answer 1

您只需对所有子级别元素进行另一个循环并更改数字即可。以下是相关代码更改。

$('.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_"+subCategory+"']").remove(); 使用

$(".add_multi_category_block [class='sub_category_"+subCategory+"']").remove(); 这将限制 jquery 仅在指定的父 div 内搜索 .add_multi_category_block .