¿Por qué .attr no cambia el atributo en cada función?

I have a very simple script that should change links' ids but somehow it is not working. Here is the code :

$(document).ready( function() {
    $('mylinks').each(function(index) {
        $(this).attr({
            'id': 'mylink-'+index
        });
    });
});


<div class="mylinks">
<a href="http://www.google.com">google</a>
<a href="http://www.google.com">google2</a>
</div>

I have tries changing mylinks a:

  • div.mylinks
  • div.mylinks a

but none of them worked. What am I missing ?

EDITAR

Most of you are right. I have to use $('.mylinks a').each( ... but the issue was that I was looking at the RMB->Source (where the content is not updated) instead of Inspect Element.

preguntado el 09 de marzo de 12 a las 16:03

FYI, it's better to do this.id = 'mylink-'+index En lugar de usar .attr(). Much cleaner, shorter, faster code that way. -

...or if you do use the .attr() method, use it to eliminate your .each() call, like this... $('.mylinks a').attr('id', function(i) { return 'mylink-'+i; }); -

9 Respuestas

Edit your code and change this:

$('.mylinks a')

respondido 09 mar '12, 16:03

That (before you edited it) will match the div, not the links - Quentin

El selector mylinks coincide con cada <mylinks> elemento en la página.

Para igualar <a> elements that are descendants of a member of the mylinks class you need .mylinks a.

respondido 09 mar '12, 16:03

Your code refers to the div, not the links. Oh, and you left out the period before mylinks to properly denote the class of the div.

$('mylinks').each( debiera ser $('.mylinks a').each(

Aquí hay una ejemplo de jsFiddle.

$('.mylinks a').each(function(index) {
    $(this).attr({
        'id': 'mylink-' + index
    });
});​

respondido 09 mar '12, 16:03

That (before you edited it) will match <mylinks><a /></mylinks>, which doesn't exist in HTML. - Quentin

@Quentin - Yup, I caught that (gotta love the edit link). My fingers were flying over my keyboard so fast I'm lucky I didn't make other typos. - j08691

$('.mylinks a').each(function(){ ... });

respondido 09 mar '12, 16:03

Your selector is incorrect for mylinks. It should be $('.mylinks a').each()

respondido 09 mar '12, 16:03

class selector starts with . . change the code as below

$('.mylinks a').each(function(index) {
        $(this).attr('id', 'mylink-'+index);
});

respondido 09 mar '12, 16:03

If mylinks is the class that you give to your link, then you should write $('.mylinks')

respondido 09 mar '12, 16:03

No es. mylinks is the class of a container. - Quentin

Entonces usa $('.mylinks').find('a') - Sapán Diwakar

You need to tell it to look at the links, not just the div. This works:

$(document).ready( function() {
    $('.mylinks a').each(function(index) {
        $(this).attr("id", "mylinks"+index);
    });
});

respondido 09 mar '12, 16:03

Also, there's a convinience utility you can use to shorten the document.ready format, like this: $(function() { }); - nathan cox

$('mylinks') will look for element with tag name mylinks. May be its a typo you should use . for class selector. If you want to select all the anchor elements inside .mylinks and set there ids then use this.

$(document).ready( function() {
    $('.mylinks a').each(function(index) {
        $(this).attr({
            'id': 'mylink-'+index
        });
    });
});

respondido 09 mar '12, 16:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.