Automatically increment class tag on multiple divs-CodePudding

I am seeking to minimise manually selecting each div that contains an incrementing number and adding incrementing classes to them. Can this be done?

To explain in depth, let's say that a div contains ".header-menu-nav-folder-sub-nav-1" then I would like to add ".header-menu-nav-folder-sub-nav- (el 1)'-' (el 1)" and then to another div that contains ".header-menu-nav-folder- (el 1)" add ".identifer- (el 1)'-' (el 1)". Rather than manually selecting classes and manually adding incrementing classes.

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

CodePudding user response：

Consider the following.

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

There should be no reason to have to iterate each element if you use the proper selector. I would also advise considering using more generic classes, ones that are not so specific. If you need something unique, this is better advised for an ID.

Update

See example: 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));
    });
  });
});