Bug Tracker

#6135 closed bug (fixed)

Opened February 20, 2010 05:19PM UTC

Closed April 17, 2011 06:07PM UTC

Last modified March 09, 2012 02:31PM UTC

jQuery tries to access the .style attribute of text tags

Reported by: ryangreenberg Owned by:
Priority: low Milestone: 1.6
Component: css Version: 1.4.1
Keywords: Cc:
Blocked by: Blocking:
Description

When constructing elements from HTML using $([html]), jQuery will sometimes include whitespace nodes. .hide and .show try to manipulate the non-existant .style property of these whitespace nodes resulting in an error.

This error occurs on Firefox 3.5 and Safari 4 for Mac. See a demonstration of this bug at http://jsbin.com/avisi/6. Here is a test case:

<body>
If you don't see "Hi" and "Hello", an error occurred.
<div id="project">
  <h1>Hi</h1>
  <h2>Hello</h2>
</div>
</body>

var h = $('#project').html();
$('#project').remove();
$(h).hide().appendTo('body');
alert("No error with whitespace nodes.");

''Note: I know this is not a preferred way to duplicate elements on the page--this code is simply to demonstrate the problem. I discovered this problem when loading HTML fragment from the server and trying to insert them using $(html).hide().appendTo().''

Attachments (1)
Change History (8)

Changed February 20, 2010 05:20PM UTC by ryangreenberg comment:1

I forgot to change the name of this ticket, which should be "jQuery tries to access the .style attribute of whitespace nodes"

Changed February 21, 2010 01:36PM UTC by Markus.Staab comment:2

Your html ist not Valid.

Changed February 22, 2010 12:12AM UTC by ryangreenberg comment:3

Replying to [comment:2 Markus.Staab]:

Your html ist not Valid.

I'm supplying just an HTML fragment for this example. You can see in the test case that a complete doctype declaration and head is provided. If there is something invalid about the following fragment, please be more specific about the problem:

<div id="project">
  <h1>Hi</h1>
  <h2>Hello</h2>
</div>

Changed November 15, 2010 03:10AM UTC by dmethvin comment:4

priority: → undecided
status: new → open

Changed November 18, 2010 07:38PM UTC by cowboy comment:5

Why not create an :element selector?

$.expr[":"].element = function( elem ) { return elem.nodeType === 1; };

$("<div>a</div>b<div>c</div>").filter(":element").hide().end();

Or an .elements() method:

$.fn.elements = function(){
  return this.pushStack( this.filter(function(){
    return this.nodeType === 1;
  }), "elements", "" );
};

$("<div>a</div>b<div>c</div>").elements().hide().end();

Changed November 18, 2010 08:27PM UTC by cowboy comment:6

Or something like this more generic .nodeType() method (plugin):

https://gist.github.com/705550

Changed April 17, 2011 06:07PM UTC by John Resig comment:7

resolution: → fixed
status: open → closed

Make sure that hide or show don't fail when operating on non-Element nodes. Fixes #6135.

Changeset: 21c0be8496127df3f0ad652e582133148430cc41

Changed April 17, 2011 06:08PM UTC by john comment:8

milestone: 1.4.2 → 1.6
priority: undecided → low