count classes and assign different id

Question

I have three elements with the same class:

<div class="hotel_price">30.00</div>
<div class="hotel_price">35.00</div>
<div class="hotel_price">36.00</div>

my function:

<script>
  $(document).ready(function() {
    for(i=1;i<=3;i++){ $('.hotel_price').attr('id','hotel_'+i);}
  });
</script>

the result:

<div id="hotel_3" class="hotel_price">30.00</div>
<div id="hotel_3" class="hotel_price">35.00</div>
<div id="hotel_3" class="hotel_price">36.00</div>

and I need:

 <div id="hotel_1" class="hotel_price">30.00</div>
    <div id="hotel_2" class="hotel_price">35.00</div>
    <div id="hotel_3" class="hotel_price">36.00</div>

your other question got closed, so i'll answer you here. Your problem was that you had converted you "string" to an "integer", thus you could not use "substring" on it. I have a working "correct" example [here](http://jsfiddle.net/SpYk3/6tYwC/) that also uses less code. Simply include that function, then where you want to apply it to something, assign the func to a variable and get the substrings you need — SpYk3HH, May 21 '13 at 15:59

Paolo Bergantino · Accepted Answer · 2013-05-20T15:58:05.613

8

You want:

$('.hotel_price').attr('id', function(i) { return 'hotel_' + i; });

The reason your code is not working is because you are setting the IDs of all 3 elements each time through the loop:

for(i=1;i<=3;i++) {
   // at this point, there is nothing specifying which .hotel_price to modify
   // so all 3 of them will be changed each time around
   // using .attr(name, fn) or .each(fn) is the jQuery way to do this.
   $('.hotel_price').attr('id','hotel_'+i);
}

edited May 20 '13 at 15:58

answered May 20 '13 at 15:55

Paolo Bergantino

480,997
81
517
436

This is much better than using `each` – Achrome May 20 '13 at 15:57
Minor quibble, perhaps, but wouldn't `prop()` (for the `id` property) be a better choice? – David Thomas May 20 '13 at 15:57
@DavidThomas, is `id` a property? I would have thought in this instance `.attr()` is ok. – Derek Henderson May 20 '13 at 15:58
+1 - I've never seen a function used in this situation, very handy! Index specifier and all. – Madbreaks May 20 '13 at 15:58
David Thomas every time I see the prop vs. attr arg I think negligible. they both work and if on older ver of jquery? when u have guys new to dev who knows what ver they have. – origin1tech May 20 '13 at 15:58
@Derek (and implicitly C.Hazelton): I'm not quite sure, I've read a number of arguments either way on the matter and my own use of `prop()` to set/get the `id` (in those situations where for some reason I can't use `nodeRef.id`/`nodeRef.id = ...`) is probably habitual more than rationalised. – David Thomas May 20 '13 at 16:01
@C.Hazelton New devs drop their own version of jQuery into your site? That's a bit agro don't you think? – Madbreaks May 20 '13 at 16:02
For consistency, .prop() should be used as it is internally using elem.id instead of setting attribute on DOM element – A. Wolff May 20 '13 at 16:02
`prop` is normally used for temporary states like enabled/disabled, clicked/unclicked. `attr` is used to set attributes in the DOM: id, class, href, src. – Barmar May 20 '13 at 16:03
I normally prefer to use `.prop()`, but I would have thought `.attr()` is the preferred choice for ID. However, I admit to not being 100% clear on when something is a property versus an attribute. I would love to see a resource that explained this in really simply, hard-to-get-wrong terms! – Derek Henderson May 20 '13 at 16:04
@DavidThomas: jQuery has an example on the .attr() page doing exactly what I am doing above: http://api.jquery.com/attr/#example-1-1 – Paolo Bergantino May 20 '13 at 16:04
@Barmar, thx, I've seen that post several times. Yet somehow we're not clear. I would have thought ID was an attribute, but now there's an argument that it's a property. Or is it both? – Derek Henderson May 20 '13 at 16:09
@DerekHenderson: The 1.6.1 Release Notes has a nice table showing what is what: http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ - ID is an attribute. – Paolo Bergantino May 20 '13 at 16:11
2

Did the OP want id's to be 1,2,3 and not 0,1,2? – Ascherer May 20 '13 at 16:14
@PaoloBergantino, thank you, that will prove to be a very useful resource! – Derek Henderson May 20 '13 at 16:15
1

@Ascherer: He can take it from here ;) I would imagine in most cases it wouldn't really make a difference (and I strongly suspect he probably doesn't even need to do this), but my goal is not for my answer to be copy+paste ready. – Paolo Bergantino May 20 '13 at 16:17
@PaoloBergantino fair enough haha. There was a pending edit for it, so i thought id make a comment – Ascherer May 20 '13 at 16:19

Achrome · Answer 2 · 2013-05-20T16:32:33.050

1

You want to use the each() function to iterate over the elements.

$('.hotel_price').each(function(i) {
    $(this).attr('id', 'hotel_' + i);
});

edited May 20 '13 at 16:32

answered May 20 '13 at 15:55

Achrome

7,773
14
36
45

This is a reasonable approach, though the approach suggested by @PauloBergantino is nicer still. – Madbreaks May 20 '13 at 15:59
I agree. It was so simple and handy. I actually learnt something from it. :D – Achrome May 20 '13 at 16:00
Ditto. +1 anyway, because there's nothing at all wrong with this approach. I edited your answer to remove the `$(document).ready()` part, since it's implied (and op is already using it) -- just to make the charcter-lenth of your answer similar to the popular answer. I think the only very minor drawback to this approach is the 2nd `$(...)` call required. – Madbreaks May 20 '13 at 16:06
@AshwinMukhija (and implicitly Madbreaks): I wanted to give a +1 to this answer, but I am surprised how both of you missed a major thing here... **selector missing quotes**! – palaѕн May 20 '13 at 16:31

score 0 · Answer 3 · answered May 20 '13 at 15:56

0

When you write $('.hotel_price').attr(...) you're setting the attribute of all elements that match the selector. You need to iterate over the elements, operating on each of them in turn so you can assign different attributes to each. jQuery's each() method is used for this.

var i = 1;
$('.hotel_price').each(function() {
    $(this).attr('id','hotel_'+i);
    i++;
});

answered May 20 '13 at 15:56

Barmar

741,623
53
500
612

2

No need for an external var like that, use the index passed to `each` – Madbreaks May 20 '13 at 15:56
I could, but they start from 0, so I'd have to add 1 to it. No big deal either way. – Barmar May 20 '13 at 15:57

origin1tech · Answer 4 · 2013-05-20T16:05:16.433

0

$(document).ready(function () {
    $('div.hotel_price').each(function (ctr) {
         $(this).attr('id', 'hotel_' + (ctr +1));
     });
});

edited May 20 '13 at 16:05

answered May 20 '13 at 15:56

origin1tech

749
6
16

prograhammer · Answer 5 · 2013-05-20T17:28:46.260

-1

Using jQuery's .eq()

$(document).ready(function() {
    for(i=1;i<=3;i++){ $('.hotel_price').eq(i-1).attr('id','hotel_'+i); }
});

edited May 20 '13 at 17:28

answered May 20 '13 at 15:57

prograhammer

20,132
13
91
118

count classes and assign different id

5 Answers5