Bug Tracker

Opened 11 years ago

Closed 10 years ago

#3680 closed bug (fixed)

Leading/trailing space not treated consistently in className

Reported by: rmurphey Owned by:
Priority: minor Milestone: 1.4
Component: core Version: 1.3.2
Keywords: Cc: rebecca@…
Blocked by: Blocking:

Description

[this probably needs a better description]

I've set up a demo page that shows this bug in detail at:

http://www.rebeccamurphey.com/stuff/classbug/

I am populating a page with HTML contained in a JSON object sent by the server. Once the page is populated, I attempt to run the following jQuery:

$('li.toggle').size()

There are 54 li's that should match; Firefox 3 finds them, but other major browsers do not. I suspect the issue occurs when a class attribute contains some escape characters in the JSON, e.g.:

<li class=\"toggle\r\n\t\t\t\t\t\t\t\t\t\t\">

The following will result in alerts as appropriate, at least in Safari:

$('li).each(function() {

if (this.className.match('toggle')) { alert('match'); }

});

But this will not:

$('li').each(function() {

if (this.className == 'toggle') { alert('match'); }

});

Attachments (2)

test-3680.html (648 bytes) - added by dmethvin 11 years ago.
Works for FF and IE8.
test_class_selector.html (481 bytes) - added by batiste 10 years ago.
A test that try to reproduce the bug 3680

Download all attachments as: .zip

Change History (9)

comment:1 Changed 11 years ago by flesler

Component: selectorcore
need: ReviewTest Case

That's odd, IE's regex engine does match \r, \n and \t when using /\s/.

Can you provide a test case ? an html file that reproduces the problem. Try not to use ajax, add the json within a js file and include it.

comment:2 Changed 11 years ago by rmurphey

I've updated the test case at

http://www.rebeccamurphey.com/stuff/classbug/

it wasn't using AJAX before, it was just populating the div with the json when the a#load was clicked.

comment:3 Changed 11 years ago by rmurphey

Per the test case page I posted, this is a problem in:

  • Safari 3.2
  • IE6
  • IE7

comment:4 Changed 11 years ago by dmethvin

With a newline in the string, you are creating HTML like: {{{<li class=\"toggle

">}}}

}}}

http://www.w3.org/TR/html401/types.html#type-cdata

"User agents may ignore leading and trailing white space in CDATA attribute values (e.g., " myval " may be interpreted as "myval"). Authors should not declare attribute values with leading or trailing white space."

I've attached a test case that shows that even with bare HTML/DOM, Firefox trims the trailing newlines/spaces but IE does not. Both are valid. The test correctly shows that 2 elements are selected in both IE and Firefox.

Whatever the problem is here, it seems that it's very dubious to depend on the behavior of trailing whitespace in a class name.

Changed 11 years ago by dmethvin

Attachment: test-3680.html added

Works for FF and IE8.

comment:5 Changed 10 years ago by dmethvin

Summary: Elements that match selector are found in some browsers, not found in othersLeading/trailing space not treated consistently in className

Changed 10 years ago by batiste

Attachment: test_class_selector.html added

A test that try to reproduce the bug 3680

comment:6 Changed 10 years ago by batiste

I try to reproduce this bug but without success. Seems fixed to me.

comment:7 Changed 10 years ago by john

Milestone: 1.31.4
Resolution: fixed
Status: newclosed
Version: 1.2.61.3.2

This has since been fixed in jQuery 1.4.

Note: See TracTickets for help on using tickets.