Bug Tracker

#7175 closed bug (worksforme)

Opened October 13, 2010 11:50AM UTC

Closed October 13, 2010 02:20PM UTC

Last modified October 13, 2010 06:08PM UTC

$.fn.add cannot add 'select' element to a set op option elements

Reported by: tore@systorvest.no Owned by:
Priority: low Milestone: 1.4.3
Component: selector Version: 1.4.2
Keywords: Cc:
Blocked by: Blocking:
Description

Hi

$('option').add('#s') does not work correctly when #s is a select element. This has been tested in ie8 and firefox 3.6 See demo below.

This hurts JQuery UI, because jquery.ui.widget.js (line18) use the following code to find loop through an element and all it's children.

$( "*", this ).add( this ).each(function() {...}

Demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
	$('option').add($('#s')[0]).css('background-color','red');
	$('span').add($('#d')).css('background-color','red');
	$('#msg1').text('length='+ $('option').add($('#s')[0]).length);
	$('#msg2').text('length='+ $('option').add($('#d')[0]).length);
	$('#msg3').text('length='+ $('span').add($('#d')).length);
});	

</script>
</head>
<body>
	<select name="s" id="s">
		<option value="1">One</option>
		<option value="2">Two</option>
	</select>
	<div id="d">
		<span style="background-color:blue">Text</span>
		<span style="background-color:blue"> Text</span>
	</div>
	<div id="msg1"></div>
	<div id="msg2"></div>
	<div id="msg3"></div>
</body>
</html>

-- \\\\

Tore Bastiansen

Attachments (0)
Change History (2)

Changed October 13, 2010 02:20PM UTC by addyosmani comment:1

component: unfiled → selector
priority: undecided → low
resolution: → worksforme
status: new → closed

This appears to be working fine (it's a replication of your original test case): http://jsfiddle.net/addyosmani/D7AEj/1/.

If you are able to supply further information or additional test cases we would be more than happy to re-investigate the issue mentioned.

Changed October 13, 2010 06:08PM UTC by tore@systorvest.no comment:2

The first "lenght=2" should be "lenght=3". It selects two option elements and tries to add a select (id=s) to the result. 

	$('option').add($('#s')[0]);

and

	$('option').add($('#d')[0]);

Should generate a result of the same length. The only difference is adding a select instead of a div.

Note that $('option').add($('#s')) works fine (without the [0]) adding a jQuery object instead of a DOM element. The doumentation of add has an example adding a DOM element.