1

En una pregunta anterior me han dado este código y tengo una problema que es como poder mostrar el id de cada elemento creado o como obtener la id( lo que pasa es que necesito hacer un if). Los canvas se crean en la funcion 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);
4
  • 1
    pero ese codigo que pones no es el actualizado con mi respuesta ..
    – lois6b
    el 4 may. 2017 a las 15:18
  • losé, pero alfinal es lo mismo, no? ahora mi problema es obtener esa id creada el 4 may. 2017 a las 15:19
  • 1
    pero si no pones el codigo en el que creas los id's,... no se entiende de que hablas
    – lois6b
    el 4 may. 2017 a las 15:19
  • podrias editarmela? con tú código? del cel es bastante dificil el 4 may. 2017 a las 15:21

1 respuesta 1

1

En el siguiente ejemplo te ilustro como colocar el id=.. a cada elemento creado y luego como acceder a dichos elementos:

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>

6
  • que bien, me podrias explicar el código para así aprender porfavor? y como sería para hacer un for para cada elemento? osea, necesito EN OTRA FUNCION APARTE , hacer document.getElementById con cada id de los canvas creados, y a cada canvas hacerle un borde rojo por ejemplo, porfavor ayuda con explicacion he visto que tu si sabes, gracias el 4 may. 2017 a las 16:30
  • Ok, te lo explicare, solo dame un segundo.
    – fwBasic
    el 4 may. 2017 a las 16:44
  • okey gracias:D¡ el 4 may. 2017 a las 17:05
  • Revisa nuevamente el código, te deje al final un ejemplo de como modificar el color del borde tanto en jQuery como en JavaScript, espero esto te ayude, Saludos!! ;))...
    – fwBasic
    el 4 may. 2017 a las 17:52
  • vayaa¡! que bien explicado, mi única duda es si podria realizar lo del borde fuera de todas estas funciones en una funcion aparte y lo del ^= es un operador? , muchas graias el 4 may. 2017 a las 18:38

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.