Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#8377 closed bug (invalid)

siblings() impacts ancestors siblings

Reported by: luckylooke@… Owned by: luckylooke@…
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/

Change History (3)

comment:1 Changed 9 years ago by Rick Waldron

Component: unfiledtraversing
Owner: set to luckylooke@…
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.

comment:2 Changed 9 years ago by anonymous

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

comment:3 Changed 9 years ago by addyosmani

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

Note: See TracTickets for help on using tickets.