find on page neighbouring siblings jquery?

Question

ok i've been searching for an answer to this (if there even is one) with no luck

i have a succession of div elements as shown in the pic bellow:

http://i61.photobucket.com/albums/h46/DrAcOliCh_2006/untitled-1.jpg?t=1300520458

the blue background is the absolute parent of the orange divs which are also siblings

the DOM is not quite organized according to how the orange elements appear on the page because they are all draggable (i used jquery UI) and i moved them around inside the parent, yet, as some know, the DOM doesn't get reorganized when i move draggable elements around, so basically the siblings structure remains the same inside the DOM

what i kinda need (again if that is even possible) is to determine the immediate on page neighbouring siblings of eachother; in other words, say we take that "FlashBanner" element which, on page, has the "Logo", the "Search" and the "ShoppingBasket" elements as immediate top siblings and the "Categories" and "Content" elements as immediate bottom siblings (and no left or right siblings)

i have a manual solution to this, that is to pre-specify the on page neighbouring siblings for each element through a series of form fields and stuff (another story and another wall of text to explain), but that is not important atm as i want to know if it can be done automatically (i.e tell jquery to find them for me)

appreciate any help, even an "it can't be done automatically", and thank you for your time

hope this doesn't sound to ambiguous (or silly for that matter) and why i need to do that don't ask :P wall of text to explain

cheers :)

Answer 1

Just wanted to clarify for you that the DOM does in fact changes itself when you move stuff around with draggable-ui.

So that might help you find what you are looking for.

You can do something like:

$('#flashbanner').prev()  // For previous siblings

Or iterate through all the divs.

$(#blue).find('div').each(function(){
  $(this).blahblah  // current div
});

Or even iterate through all previous siblings, and look for heights etc. But this should be last resort stuff...

$('#flasshbanner').prevAll().each(function(){
  var height = $(this).height();
  if(height == blahblah){
    //do stuff
  }
});

But the key is the DOM, it shifts when you move stuff around, so if you know what happens, you can find it 'automatically' with jQuery. The Firefox plugin FireBug should help you look at the new DOM as you are shifting it around. (I believe most web developers use FireFox while developing because of FireBug's pure brilliance btw)

You could try uploading your code to http://jsfiddle.net/ so we can help you further with actual source codes. :)

Good luck mate.