Ticket #7175 (closed bug: worksforme)
$.fn.add cannot add 'select' element to a set op option elements
| Reported by: | tore@… | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.4.3 |
| Component: | selector | Version: | 1.4.2 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
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
Change History
comment:1 Changed 3 years ago by addyosmani
- Priority changed from undecided to low
- Resolution set to worksforme
- Status changed from new to closed
- Component changed from unfiled to selector
comment:2 Changed 3 years ago by tore@…
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.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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.