Search code examples
javascriptjqueryclassauto-increment

Automatically increment class tag on multiple divs

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

Solution

  • 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));
    });
  });
});