Bug Tracker

Modify

Ticket #6135 (closed bug: fixed)

Opened 4 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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

6135-unit-test.patch Download (919 bytes) - added by brandon 4 years ago.
unit test

Change History

comment:1 Changed 4 years ago by ryangreenberg

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

comment:2 follow-up: ↓ 3 Changed 4 years ago by Markus.Staab

Your html ist not Valid.

comment:3 in reply to: ↑ 2 Changed 4 years ago by ryangreenberg

Replying to 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 4 years ago by brandon

unit test

comment:4 Changed 3 years ago by dmethvin

  • Priority set to undecided
  • Status changed from new to open

comment:5 Changed 3 years ago by cowboy

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();

comment:6 Changed 3 years ago by cowboy

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

 https://gist.github.com/705550

comment:7 Changed 3 years ago by John Resig

  • Status changed from open to closed
  • Resolution set to fixed

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

Changeset: 21c0be8496127df3f0ad652e582133148430cc41

comment:8 Changed 3 years ago by john

  • Priority changed from undecided to low
  • Milestone changed from 1.4.2 to 1.6

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.