Skip to main content

Bug Tracker

Side navigation

#8377 closed bug (invalid)

Opened February 24, 2011 09:39PM UTC

Closed March 14, 2011 05:49PM UTC

Last modified March 14, 2012 01:28PM UTC

siblings() impacts ancestors siblings

Reported by: luckylooke@gmail.com Owned by: luckylooke@gmail.com
Priority: undecided Milestone: 1.next
Component: traversing Version: 1.5
Keywords: Cc:
Blocked by: Blocking:
Description

used latest jquery and jquery ui

I am using: FF3.6.13 on winXP

it supposed to change background color only in sibling divs of actual resizing div, and it also changeing color in ancestors siblings divs

changing color was used to minimize problem only. I have another function but the impact is the same

minimized code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> bug? </title>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){														/**      <----  DOCUMENT READY FN     */
			randomColor($('#id2'));
			randomColor($('#id111'));
			randomColor($('#id112'));
			randomColor($('#id12'));
			$('#id1').resizable({handles: 's'});
			$('#id11').resizable({handles: 'e'});
			$('#id111').resizable({handles: 's'});
			$('#id1, #id11, #id111').bind( "resize", function(event, ui) { $(this).siblings('[id^="id"]').each(function(index, el){
				randomColor(el);
			}); });
		});
	function randomColor(el){
	var rndColor = Math.random();
		rndColor *= 1000000;
		rndColor = Math.round(rndColor);
		$(el).css('background-color', '#' + rndColor);
		}
	</script>
</head>
<body>
<div id="wrap" style="width: 200px; height: 200px; display:inline-block; border: 1px solid #1C94C4">
	<div id="id1" style="width: 100%; height: 50%">
		<div id="id11" style="width: 50%; height: 100%; float: left">
			<div id="id111" style="width: 100%; height: 50%"></div>
			<div id="id112" style="width: 100%; height: 50%"></div>
		</div>
		<div id="id12"style="width: 50%; height: 100%; float: left"></div>
	</div>
	<div id="id2" style="width: 100%; height: 50%"></div>
</div>
</body>

My attempt to show it in jsfiddle but it doesnt work there at all:

http://jsfiddle.net/P3xUD/

Attachments (0)
Change History (3)

Changed February 24, 2011 09:41PM UTC by rwaldron comment:1

component: unfiledtraversing
owner: → luckylooke@gmail.com
status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists.

Changed March 04, 2011 11:51AM UTC by anonymous comment:2

I tried to replace selector siblings() with selectors parent().children().not(thisElement) and behaviour was same..

this leads me to conclusion that I dont have problem with siblings selector but with hested resizable elements. And this problem is already discussed here: http://bugs.jqueryui.com/ticket/4333

Changed March 14, 2011 05:49PM UTC by addyosmani comment:3

resolution: → invalid
status: pendingclosed

Because you've confirmed the issue you have isn't with sibling selectors (as per this ticket) but rather nested resizable elements (and there's a thread going on for that on the UI tracker), we'll be closing it. Please feel free to continue the discussion about the issues you're experiencing on http://bugs.jqueryui.com/ticket/4333