在多個div上自動增加類標簽

我正在尋求最小化手動選擇每個包含遞增數字的 div 并向它們添加遞增類。這可以做到嗎？

為了深入解釋，假設一個 div 包含“.header-menu-nav-folder-sub-nav-1”，那么我想添加“.header-menu-nav-folder-sub-nav- (el 1)'-' (el 1)" 然后到另一個包含 ".header-menu-nav-folder- (el 1)" 的 div 添加 ".identifer- (el 1)'- ' (el 1)"。而不是手動選擇類和手動添加遞增類。

 $(document).ready( function() {
$('.header-menu-nav-list').each(function() {
  $(this).find('.header-menu-nav-folder-sub-nav-1').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-1-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-1').addClass('identifer-1-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-2').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-2-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-2').addClass('identifer-2-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-3').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-3-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-3').addClass('identifer-3-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-4').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-4-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-4').addClass('identifer-4-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-5').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-5-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-5').addClass('identifer-5-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-6').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-6-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-6').addClass('identifer-6-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-7').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-7-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-7').addClass('identifer-7-'   (el   1));
  });
  
  $(this).find('.header-menu-nav-folder-sub-nav-8').each(function(el) {
    $(this).addClass('header-menu-nav-folder-sub-nav-8-'   (el   1));
    $(this).closest('.header-menu-nav-list').find('.header-menu-nav-folder-8').addClass('identifer-8-'   (el   1));
  });
  
});
      });

uj5u.com熱心網友回復：

考慮以下。

$(function() {
  $('.header-menu-nav-list').each(function(i, list) {
    $("[class*='header-menu-nav-folder-sub-nav-']", list).each(function(j, el) {
      $(el).addClass('header-menu-nav-folder-sub-nav-1-'   (j   1));
      list.find('.header-menu-nav-folder-1').addClass('identifer-1-'   (j   1));
    });
  });
});

如果您使用正確的選擇器，則沒有理由必須迭代每個元素。我還建議考慮使用更通用的類，那些不是那么具體的。如果您需要一些獨特的東西，最好使用 ID。

更新

見例子：https ://jsfiddle.net/Twisty/2cnjfgx1/5/

$(function() {
  $('.header-menu-nav-list').each(function(i, list) {
    $(list).find(".header-menu-nav-folder-sub-nav", list).each(function(j, el) {
      $(el).addClass('header-menu-nav-folder-sub-nav-'  (i   1)   '-'   (j   1));
      $(list).find('.header-menu-nav-folder-'  (i   1)).addClass('identifer-'  (i   1)   '-'   (j   1));
    });
  });
});

標籤：javascriptjQuery班级自动递增

上一篇：Python：為什么functools.partial函式在設定為類屬性時不會成為系結方法？

下一篇：socket.io中的房間是否會在一段時間后自動洗掉？