Acrescer número a id escolhida

[quadrado="Descrição"]Olá meus caros, tenho o seguinte pedido, mas antes necessito explicar o funcionamento do código abaixo.
Ele acresce a todas as id um número, começando de 00 e indo até 0X. Porém desejo que ele funcione apenas em algumas id´s especificas de acordo com o código html que possuo, que também deixo abaixo. Meu pedido é que apenas as id dentro da classe ulatris é que sejam acrescidos os números as id´s, seria possível?

Código JS:

Código:


(function ($) {
          'use strict';
       
          $(function () {
            $('[id]').each(function (index, el) {
              $(this).attr('id', $(this).attr('id') + '0' + index);
            });
          });
        }(jQuery));


Código HTML:

Código:


<div class="character-info-bottom"><div id="atrificha" class="infos-508p"><h2>Atributos Secundários</h2><ul class="ulatris"><li class="atli"><span>Pontos de Vida (Pv):</span><span class="psverde" id="psverde">59</span></li><li class="atli"><span>Pontos de Stamina (Ps):</span><span class="psverde" id="psverde">85</span></li><li class="atli"><span>Dano | Ataque:</span><span id="dano">11</span></li><li class="atli"><span>Bloqueio | Defesa:</span><span id="block">11</span></li><li class="atli"><span>Esquiva | Evasão:</span><span id="esquiva">11</span></li><li class="atli"><span>Acerto | Mira:</span><span id="acert">17</span></li><li class="atli"><span>Manipular | Enganar:</span><span id="eng">02</span></li><li class="atli"><span>Raciocínio | Mentalizar:</span><span id="ment">02</span></li><li class="atli"><span>Aparência:</span><span id="apar">00</span></li><li class="atli"><span>Disfarce:</span><span id="disf">00</span></li><li class="atli"><span>Concentração:</span><span id="conc">03</span></li><li class="atli"><span>Resistência:</span><span id="rest">05</span></li><li class="atli"><span>Movimentos por Turno:</span>1 Movimento</li></ul></div><div class="infos-508p"><ul><li><span>Legenda:</span><span class="brassa">Haki do Armamento</span><span class="orassa">Haki da Observação</span><span class="hrassa">Haki do Rei</span><span class="vrassa">Bônus de Vantagem</span><span class="maerassa">Bônus de Maestria</span><span class="irassa">Bônus de Equipamento</span><span class="cdrassa">Bônus de Card</span></li></ul></div><div class="infos-50p" id="atripr"><h2>Atributos Primários</h2><ul><li><span>Força (For):</span>02</li><li><span>Destreza (Dex):</span>05</li><li><span>Agilidade (Agi):</span>03</li><li><span>Vigor (Vgr):</span>03</li><li><span>Constituição (Con):</span>02</li><li><span>Percepção (Per):</span>02</li><li><span>Inteligência (Int):</span>01</li><li><span>Espirito (Esp):</span>00</li><li><span>Sorte (Sor):</span>00</li><li><span>Lógica (Log):</span>00</li><li><span>Persuadir (Pes):</span>00</li><li><span>Carisma (Car):</span>00</li><li><span>Força de Vontade (Frv):</span>02</li></ul></div><div class="infos-50p"><h2>Informações</h2><ul><li><span>Level do Personagem:</span>01</li><li><span>Nível de Classe:</span>Indefinido</li><li><span>Posição no Grupo</span>Indefinido</li><li><span>Alcunha:</span>Indefinido</li><li><span>Média de Narração:</span>Indefinido</li><li><span>Aventuras Finalizadas:</span>Indefinido</li></ul></div><div class="infos-50p" id="pvpinfo" style="<br ></div> &nbsp; &nbsp;margin-top: 25px;<br />"><h2>Informações PvP</h2><ul><li><span>Vitórias PvP:</span>00</li><li><span>Derrotas PvP:</span>00</li><li id="ponpvp"><span>Pontos PvP:</span>00</li></ul></div></div>


[/quadrado]
[quadrado="Informações"]Fórum: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão: MODERNBB[/quadrado]

Tentou isto daqui?

Código:

(function($) {
    'use strict';

    $(function() {
        $('.ulatris span[id]').each(function(index, el) {
            $(this).attr('id', $(this).attr('id') + '0' + index);
        });
    });
}(jQuery));

Tão simples kkk, eu tentei fazer outra função. Mas resultou perfeitamente, thanks.
Resolvido, olha o ps abaixo.

PS: teria como pra ativar ele quando o usuário clicar em um botão?

Você pode colocar um botão desta maneira:

Código:

<button type="button" id="incrementar">NOME DO BOTÃO</button>

E no código JS assim:

Código:

(function($) {
    'use strict';

    $(function() {
        $("#incrementar").on("click", function() {
            $('.ulatris span[id]').each(function(index, el) {
                $(this).attr('id', $(this).attr('id') + '0' + index);
            });
        });
    });
}(jQuery));

Caso queira desabilitar o botão após um clique, faça assim:

Código:

(function($) {
    'use strict';

    $(function() {
        $("#incrementar").on("click", function() {
            $('.ulatris span[id]').each(function(index, el) {
                $(this).attr('id', $(this).attr('id') + '0' + index);
            });
            $(this).prop("disabled", true);
        });
    });
}(jQuery));

Não testei, mas creio que funcione.

Perfeitamente, obrigado meu chapa.

[sucesso=Tópico resolvido]Tópico movido e arquivado. O autor está satisfeito e/ou a questão foi resolvida.[/sucesso]
Tópico movido para: Arquivo JavaScript & jQuery