Как заменить значение id в div блоках, если значение id равно значению класса?

Question

[Alex-Broudy]

Уважаемые знатоки, просьба подсказать, что делаю не так.
Есть такой вод html код, в котором динамично добавляются классы и id у вложенных блоков и иногда они совпадают:

<div class="all-blocks">
     <div id="block-1" class="block block-1">содержимое блока</div>
     <div id="block-2" class="block block-2">содержимое блока</div>
     <div id="block-3" class="block block-3">содержимое блока</div>
    <div id="block-4" class="block block-4">содержимое блока</div>
</div>

Но если у блока с классом all-blocks присутствует еще класс, например color-blocks, то необходимо у вложенных блоков проверить, есть ли совпадение значений у id и классов, - если есть, то необходимо у каждого такого блока добавить определенный текст к значению id., например если id был block-1 то в итоге должен стать block-1_2

попытался реализовать эту задумку, но что-то не так делаю от нехватки знаний (еще учусь) и не срабатывает ничего

jQuery(document).ready(function() { 
     var colors_blocks = jQuery(this).closest('.color-blocks');
     var block_class = color_blocks.find('.block');
     if(colors_blocks .hasClass($(this.attr('id'))) {
		$(this).attr('id').text('_2');
	}				
});

Comments

[Erl]

var colors_blocks = jQuery(this).closest('.color-blocks'); - это зачем jQuery(this)?
тогда уж $this.closest....
подучите синтаксис

Answer 1

[0xD34F]

$('.all-blocks.color-blocks .block').attr('id', function(i, id) {
  return $(this).hasClass(id) ? `${id}_2` : id;
});

или

document.querySelectorAll('.all-blocks.color-blocks .block').forEach(n => {
  n.id += n.classList.contains(n.id) ? '_2' : '';
});

Comments

[Alex-Broudy]

0xD34F, спасибо, от части решение работает и значение id в данном случае меняется, но в это значение подставляется ${id}_2, а не само значение + _2
вот так ничего не заменяется return $(this).hasClass(id) ? `${id}_2` : id;
а так подставляется ${id}_2 - return $(this).hasClass(id) ? '${id}_2' : id; если указываю ${id}_2 в кавычках.

[Alex-Broudy]

0xD34F, прошу прощения - все отлично работает! моя невнимательность )) сбросил кэш в браузере и все заработало ) огромное спасибо! ))