Javascript puede introducir un numero (1. 2. 3. etc..) en cada div?

yopmail · #1 (**permalink**) 30/03/2017, 12:16

Hola, voy a crear una mena de tabla y me gustaria saber si con javascript se puede hacer que automaticamente se ponga el numero de ID ?

Ejemplo, que javascript convierta esto:

<div class="id"></div> | <div>Color: negro</div> | <div>Tamaño: Grande</div>
<div class="id"></div> | <div>Color: blanco</div> | <div>Tamaño: Mediano</div>
<div class="id"></div> | <div>Color: verde</div> | <div>Tamaño: Pequeño</div>
<div class="id"></div> | <div>Color: azul</div> | <div>Tamaño: Extra pequeño</div>

En esto:

<div class="id">1</div> | <div>Color: negro</div> | <div>Tamaño: Grande</div>
<div class="id">2</div> | <div>Color: blanco</div> | <div>Tamaño: Mediano</div>
<div class="id">3</div> | <div>Color: verde</div> | <div>Tamaño: Pequeño</div>
<div class="id">4</div> |<div>Color: azul</div> | <div>Tamaño: Extra pequeño</div>

He buscado en google, pero no se como describirlo para buscarlo, ni se si se puede o no..

Cualquiera ayuda/comentario sera valorado con +1

Gracias

#2 (**permalink**) 30/03/2017, 12:34

Será esto?:

Código Javascript:

Ver originalfunction addNumbers2Class(c){
var classes = document.getElementsByClassName(c);
    for(var i=0;i<classes.length;i++){
    classes[i].innerHTML = i+1;
    }
}

El argumento c, sería el nombre de la clase

yopmail · #3 (**permalink**) 30/03/2017, 12:46

Cita:

Iniciado por alvaro_trewhela

Será esto?:

Código Javascript:

Ver originalfunction addNumbers2Class(c){
var classes = document.getElementsByClassName(c);
    for(var i=0;i<classes.length;i++){
    classes[i].innerHTML = i+1;
    }
}

El argumento c, sería el nombre de la clase

Primero de todo Mil Gracias por la rapidez y la intencion de prestar ayuda :)

Solo una cosa, lo he puesto tal cual:

Código:

<script type="text/javascript">
function addNumbers2Class(c){
var classes = document.getElementsByClassName(c);
    for(var i=0;i<classes.length;i++){
    classes[i].innerHTML = i+1;
    }
}
</script>

<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>

Pero me salen en blanco los div's, hago algo mal?

Gracias y +1

#4 (**permalink**) 30/03/2017, 13:18

gatilla la función con algun evento...

Código HTML:

Ver original<input type="button" onclick="addNumbers2Class('hola');" value="Add" />
 
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>

no tiene que ser c obligatoriamente el nombre de las clases....

yopmail · #5 (**permalink**) 30/03/2017, 14:22

Cita:

Iniciado por alvaro_trewhela

gatilla la función con algun evento...

Código HTML:

Ver original<input type="button" onclick="addNumbers2Class('hola');" value="Add" />
 
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>
<div class="hola"></div>

no tiene que ser c obligatoriamente el nombre de las clases....

Muchas Gracias de nuevo, hay forma de hacerlo sin necesidad de ninguna accion? si no simplemente cargarlo cuando se carga la web?

Mil Gracias y otro +1

#6 (**permalink**) 30/03/2017, 15:43

Aplica esto:

Código HTML:

Ver original<html>
    <head>
 
        <script type="text/javascript">
 
        function addNumbers2Class(c){
        var classes = document.getElementsByClassName(c);
            for(var i=0;i<classes.length;i++){
            classes[i].innerHTML = i+1;
            }
        }
 
        document.addEventListener("DOMContentLoaded", function(){ addNumbers2Class("asd") }, false);
 
        </script>
    </head>
    <body>
        <div class="asd"></div>
        <div class="asd"></div>
        <div class="asd"></div>
    </body>
</html>

yopmail · #7 (**permalink**) 31/03/2017, 00:46

Ahí te has pasado.... Funciona mejor que un reloj suizo, Miiiill Graciass¡¡¡¡¡ +1

siddartha23 · #8 (**permalink**) 31/03/2017, 13:18

Cita:

Iniciado por yopmail

Primero de todo Mil Gracias por la rapidez y la intencion de prestar ayuda :)

Solo una cosa, lo he puesto tal cual:

Código:

<script type="text/javascript">
function addNumbers2Class(c){
var classes = document.getElementsByClassName(c);
    for(var i=0;i<classes.length;i++){
    classes[i].innerHTML = i+1;
    }
}
</script>

<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>

Pero me salen en blanco los div's, hago algo mal?

Gracias y +1

Obvio que no te va funcionar:

Uno, solo estás declarando la función, pero no la llamas en ningún lugar
Dos, Los scripts siempre se pegan al final del documento para asegurarse que primero carguen todos los elementos con los cuales quieres trabajar.

mpozo · #9 (**permalink**) 31/03/2017, 15:14

Aunque pides una solución javascript, con css es posible hacerlo

Código CSS:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            body {
                counter-reset: incremento;
            }
 
            div.c:before {
              content: counter(incremento);
              counter-increment: incremento;
            }
        </style>
        <script>
 
        </script>
    </head>
    <body>
 
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
 
    </body>
</html>