Incorrect jQuery Selection in IE

Question

I'm writing a basic app which involves changing the html in divs referenced by name, and it's working fine in Chrome, Firefox, Safari, etc. but not in our beloved Internet Explorer. I'm loading the content dynamically so I can't give you full code but here's an example of the HTML (where there would be many such divs stacked with ascending numerical names):

<div id="entry" class="entry" name="15">
    <div id="comment" class="comment" name="15">Click here...</div>
    <div id="rating" class="rating" name="15">24</div>
</div>

And here's the jQuery function triggered when a user clicks on the "entry" div:

$.fn.rateup = function() {
    var dname = $(this).attr('name');
    var rating = $("div.rating[name="+dname+"]").html();
    var newrating = parseInt(rating)+1;
    $("div.rating[name="+dname+"]").html(newrating);
}

Now, what I want to have happen is for the HTML in the rating div within the clicked entry div to increase by one, but in IE the rating of the entry div below the one clicked increases. I have no idea how it could possibly be selecting the wrong div here, as it has a very specific name which is very clearly referenced in my code. I've tried doing the same thing with jQuery's .find() method within the clicked entry div, and get the same result. I'm stumped.

Click here to see what I'm talking about. It may be buggy in other ways, but this is the only thing I'm concerned with at the moment. If worst comes to worst, I can just have it select element with [name=parseInt(dname)-1] if and only if rendered in IE, but I'd like to find a less hackey solution.

Thanks for your thoughts.

EDIT (6/24 11:30pm)

Incorporating the answers below and my newfound knowledge that some quirky CSS was positioning things in confusing places (inline float right pops things down to the next line unless handled correctly), I have resolved this problem. Thanks to you all for helping me become a better coder. I'll start using attributes more correctly!

Answer 1

seems like you could simplify everything if you used id's properly. ;)

id's should be unique on the entire page, and it seems as though you're using them more like classes. perhaps using id's like "1" for entry, "c1" and "r1" for comment and rating would allow for cleaner selectors, thus resolving the issue completely. you could then do something like

$('#r'+$(this).id).html(newrating)

doesn't really solve the issue with ie you're seeing, but makes the html and javascript cleaner imho.

Answer 2

Well, I think you are confusing the selector.

<div id="e15" class="entry">
    <div class="comment">Click here...</div>
    <div class="rating">24</div>
</div>

if you try to select the rating div now, "this.rating" it should select the right one.

---

PS Your name field is not really necessary, and would be invalid in xhtml. (As it can only be a member of a form field)

Answer 3

I don't think that DIV elements can have a name attribute, but that is irrelevant, as it isn't required if you do all of your calculations relative to the DIV that was clicked on...

<div id="entry" class="entry">  
    <div class="comment">Click here...</div>  
    <div class="rating">24</div>  
</div>

<div id="anotherEntry" class="entry">  
    <div class="comment">Click here...</div>  
    <div class="rating">17</div>  
</div>


$.fn.rateup = function() { 
    var ratingElement = $(this).find("div.rating"); 
    var rating = ratingElement.html(); 
    var newrating = parseInt(rating)+1; 
    ratingElement.html(newrating); 
} 

This assumes that each rating DIV is wrapped in its own entry DIV, and each of these has the $.fn.rateup event handler attached.

As for the reason for the wrong rating being selected, this would depend on which elements have the event handlers attached - can we see the code that does this?