How to get the id of the created elements?

Question

How to get the id of the created elements?

Navigation

#1 by (1 votes)

1

In a previous question I have been given this code and I have a problem that is like being able to show the id of each element created or how to get the id (what happens is that I need to do an if). Canvases are created in the per.

b = [1,2,3,4,5];

    $(document).ready(function(){

        function per() {
            console.log("per()");
             var $canvas = $('<canvas></canvas>').css({
                'border-radius': '5px',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                //'position': 'absolute',
                'right': '15px',
                'bottom': '15px',
                'background-color': 'blue'
            });
          $('body').append($canvas);

        }

        $('body').append('<canvas id="minimap"></canvas>');

            $('#minimap').css({
                'background': 'rgba(1,1,1,0.7',
                'border-radius': '0px',
                'border': '1px solid rgba(255,255,255,0.2)',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
            });
           b.forEach(per);

javascript jquery

asked by Eduardo Sebastian 04.05.2017 в 17:15

source

1 answer

Problem running a shell in php SQL Server 2014 Job

score 1 · Accepted Answer

In the following example I illustrate how to place the id=.. to each element created and then how to access these elements:

b = [1,2,3,4,5];

    $(document).ready(function(){

        function per(id) {
            console.log("per()");
             var $canvas = $('<canvas id="'+id+'"></canvas>').css({
                'border-radius': '5px',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                //'position': 'absolute',
                'right': '15px',
                'bottom': '15px',
                'background-color': 'blue'
            });
          $('body').append($canvas);

        }

        $('body').append('<canvas id="minimap"></canvas>');

            $('#minimap').css({
                'background': 'rgba(1,1,1,0.7',
                'border-radius': '0px',
                'border': '1px solid rgba(255,255,255,0.2)',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
            });

         // hacemos un recorrido por el arrays "b"
            b.forEach(

           // creamos una funcion donde pasando como argumento
           // cada elemento "i" encontrado en "b".
              function(i){

             // invocamos la funcion per() donde
             // pasando como argumento el id + i
             // que sera asignado al <canvas id="id+i">
                per("id"+i); // (id1, id2, id[n]..)
            });

         // una vez creado los canvas
         // buscamos en el DOM todos los <canvas>
         // donde el id comience por id*
            $("canvas[id^=id]")

           // por cada elemento encontrado en el DOM
              .each(

             // ejecutamos una funcion
                function(){

               // donde desplegamos la propiedad "id" de cada elemento
                  console.log($(this).prop("id"));

               // modificamos el borde de cada canvas
               // a 10px en rojo solido

               // con jQuery
                  $(this).css({
                    border:'10px solid rgba(255,0,0,1)'
                  });

               // con JS
                  document.getElementById(this.id).style.border="10px solid rgba(255,0,0,1)";
                  
                  
                  
              });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>