Ticket #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: | ||
| Blocking: | Blocked by: |
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
comment:1 Changed 2 years ago by rwaldron
- Owner set to luckylooke@…
- Status changed from new to pending
- Component changed from unfiled to traversing
comment:2 Changed 2 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 2 years ago by addyosmani
- Status changed from pending to closed
- Resolution set to invalid
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
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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.