JSFiddle - React, Tailwind, and code Playground

by gsguma

HTML

<ul>
    <li id="i_1" class="teste" meu_atributo="a_1" outro="o_1">Item 1</li>
    <li id="i_2" class="teste" meu_atributo="a_2" outro="o_2">Item 2</li>
    <li id="i_3" class="teste" meu_atributo="a_3" outro="o_2">Item 3</li>
</ul>
<br />
<div id="resultado"><!-- resultado --></div>

CSS

body {
    margin:10px; 
    font:75% arial;
}
ul, #resultado { 
    border: 1px dashed green; 
    padding:10px 
}

JavaScript

$(function() {
    // Varrendo todos os inputs com a classe "teste"
    $('.teste').each(function() {
        // Pega os valores dos atributos
        var elmID       = $(this).attr('id');
        var elmMeuAtrib = $(this).attr('meu_atributo');
        var elmOutro    = $(this).attr('outro');
        var elmResult   = $('#resultado');

        // Insere os conteudo no div de resultado
        elmResult.append(' <b>id</b>="' + elmID + '"');
        elmResult.append(' <b>meu_atributo</b>="' + elmMeuAtrib + '"');
        elmResult.append(' <b>outro</b>="' + elmOutro + '"');        
        elmResult.append(' <br />');
    });
});