im css/diseñador de chico, así que por favor disculpen mi cojera en no saber nada .js

básicamente quiero saber cómo agregar un auto incremental id a un elemento de la lista con javascript /jquery para algo que estoy tratando de añadir algo de css.

antes de

<li id=""><a href="">Item number 1</a></li>
<li id=""><a href="">Item number 2</a></li>
<li id=""><a href="">Item number 3</a></li>

después de

<li id="1"><a href="">Item number 1</a></li>
<li id="2"><a href="">Item number 2</a></li>
<li id="3"><a href="">Item number 3</a></li>

gracias de antemano y sobre todo justo para la lectura de este

probado todas las respuestas, nada se ha trabajado en una simple página html con nada pero la ul/li elementos.

gracias a todos los que probé, me han fracasado en gran manera…..no soy un programador

InformationsquelleAutor ckeeley | 2011-05-15

4 Comentarios

  1. 3

    Voy a dar su li etiqueta que abarca ul con un id en el caso de que existan otros li etiquetas en la página que usted no quiere a la orden, pero en jQuery esto es muy fácil:

    <ul id="ordered">
        <li><a href="">Item number 1</a></li>
        <li><a href="">Item number 2</a></li>
        <li><a href="">Item number 3</a></li>
    </ul>

    Sólo tendría que utilizar el each método:

    $('#ordered li').each(function(i,el){
        el.id = i+1;
    });

    Recomiendo usar algo que no sea sólo un simple entero para una identificación, aunque, así que tal vez algo como 'ordered' + (i+1) en lugar de sólo i+1 arriba.

    • mezclado ambas respuestas y conseguí el resultado que quería….una vez más, un gran gracias desde el ‘average joe» que no de código
  2. 0

    Sus etiquetas decir jQuery, así:

    $("li").each(function(i){this.id = i})

    Así que usted puede aprender: es una colección de HTML nodos con la $('foo') sintaxis. Utilice los selectores de CSS, por lo que li recibirá cada <li> en la página.

    .each bucles sobre los que se recogen los elementos HTML, y hace algo para ellos. El «algo» que está en el código function(i){this.id = i}. jQuery pasa que el bucle está en la función como i, y el código dentro de las llaves establece el id de un elemento en particular a i.

  3. 0

    Si usted necesita una id para el peinado, que es una mala idea. Lo que usted debe hacer es usar css 3 pseudo clase :nth-child(n) que se encuentra en su área de css.

    • Me gustaría utilizar el CSS3 :nth-child(n) así, sin embargo no se podía confiar en que funcione en los navegadores más antiguos. Para el diseño comercial donde la accesibilidad es importante, no es el mejor camino a seguir.
    • Bien se podría decir de la misma manera que algunas personas no tienen JS activado para que, a continuación, de nuevo su solución no trabajo. Nada es a prueba de balas tristemente.
    • Cierto 🙂 Aunque no estoy seguro, me imagino que el número de usuarios de XP atascado en IE8 (o menos) superaría aquellos con JavaScript desactivado. Aunque, si usted quería ser tan seguro como sea posible, utilizando tanto probablemente haría el truco 😉
    • ¿Por qué no hacer esta asignación de ID, a continuación, a través de un serverside idioma? De esa manera estás 100% seguro de que sus elementos tienen un ID asignado
    • Sería, pero, presumiblemente, hay una razón por la que necesita ser hecho en el cliente final, de lo contrario estaríamos probablemente estar respondiendo a una pregunta diferente…
  4. 0

    Voy a ajustar el código en un div para que sea más fácil de código para

    <div id="increment">
    <li><a href="">Item number 1</a></li>
    <li><a href="">Item number 2</a></li>
    <li><a href="">Item number 3</a></li>
    </div>

    Y js sería:

    function loadcode(){
        var increments = document.getElementById("increment");
        var li = increments.getElementsByTagName("li");
        for (i=0;i<li.length;i++) li[i].setAttribute("id", i+1);
    }

    y en su HTML:

    <body onload="loadcode()">
    • probado esto en una simple página html y aún no conseguir ningún amor. gracias por su tiempo
    • Está tratando de generar el código HTML de modo que usted puede copiar y pegar en algún lugar? o cambiar a la carga de la página? También he cambiado el código un poco.
    • funciona!!!! gracias por lo mucho. im sólo aceptar con diseño..código de la vida me mata, que tengan un gran día ultimatebuster y todos los demás que leen mi dilema

Dejar respuesta

Please enter your comment!
Please enter your name here