Loop Finder

Loop Finder

Hey everybody

I need to write a script using jQuery, but am totally stuck on how it would be possible.

If you checkout my example HTML code below, you will see that it is a series of DIV's.

The DIV's are all linked, for example;

* The DIV with ID 111 is connected to the DIV below, because that DIV has a "data-one" value of 111

* The DIV with ID 222 is connected to the DIV above, because that DIV has a "data-two" value of 222

Basically the DIV ID values are linked to another DIV by reference of either "data-one" or "data-two".

In simple terms, all I want to do is when you click on a DIV with class "button", I want it to;

(A) Run though the connected DIVS and find me the ID of the next "button" it finds
(B) Return an array of ID's for all connected DIVS

For example;

If I click on the bottom DIV (ID 666), then it would run a function and return an array of (777,555,444,333,222,111)

If I was to click on the top DIV (ID 111), then it would run a function and return an array of (222,333,444,555,777)

Is this possible? I guess it would require some sort of loop, but i'm stuck on how to do this.

Thanks

  1. <div id="111" class="button">
  2. <div id="222" data-one="111" data-two="333">
  3. <div id="333">
  4. <div id="444" data-one="333" data-two="555">
  5. <div id="555">
  6. <div id="777" data-one="555" data-two="666">
  7. <div id="666" class="button">