jQuery Find DIV

[brianwill76_2016]

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">

 

[Barand]

Use a recursive function to find the divs

[brianwill76_2016]

Use a recursive function to find the divs

 

Thanks for pointing me in the right direction, is there any more information you can give as i;m out of my depth

[Barand]

A recursive function is one that calls itself. So you pass an id to the function. The function than finds the next id. It then calls itself passing this new id.

 

I came up with this, but not sure if it does exactly what wanted so you may need to tweak it.

<script type="text/javascript">
var divs = [];

    $().ready(function() {
        
        $(".button").click(function() {
            divs = [];                        // clear results 
            getLinkedDivs(this.id, "one");    // search data-one
            getLinkedDivs(this.id, "two");    // search data-two
            alert(divs.join(", "));           // show results
        })
    })
    
    function getLinkedDivs(id, dnum)
    {
        var dnum2 = dnum=="one" ? "two" : "one";
        var div1 = $("div[data-"+dnum+"="+id+"]");
        
        if (div1.length) {
            divs.push($(div1).attr("id"));
            var id1 = $(div1).data(dnum2);
            divs.push(id1);
            getLinkedDivs(id1, dnum);          // call itself with next id
        }
    }
</script>

[brianwill76_2016]

 

A recursive function is one that calls itself. So you pass an id to the function. The function than finds the next id. It then calls itself passing this new id.

 

I came up with this, but not sure if it does exactly what wanted so you may need to tweak it.

<script type="text/javascript">
var divs = [];

    $().ready(function() {
        
        $(".button").click(function() {
            divs = [];                        // clear results 
            getLinkedDivs(this.id, "one");    // search data-one
            getLinkedDivs(this.id, "two");    // search data-two
            alert(divs.join(", "));           // show results
        })
    })
    
    function getLinkedDivs(id, dnum)
    {
        var dnum2 = dnum=="one" ? "two" : "one";
        var div1 = $("div[data-"+dnum+"="+id+"]");
        
        if (div1.length) {
            divs.push($(div1).attr("id"));
            var id1 = $(div1).data(dnum2);
            divs.push(id1);
            getLinkedDivs(id1, dnum);          // call itself with next id
        }
    }
</script>

 

 

Thanks Barand, i'll give that a shot!

[brianwill76_2016]

 

A recursive function is one that calls itself. So you pass an id to the function. The function than finds the next id. It then calls itself passing this new id.

 

I came up with this, but not sure if it does exactly what wanted so you may need to tweak it.

<script type="text/javascript">
var divs = [];

    $().ready(function() {
        
        $(".button").click(function() {
            divs = [];                        // clear results 
            getLinkedDivs(this.id, "one");    // search data-one
            getLinkedDivs(this.id, "two");    // search data-two
            alert(divs.join(", "));           // show results
        })
    })
    
    function getLinkedDivs(id, dnum)
    {
        var dnum2 = dnum=="one" ? "two" : "one";
        var div1 = $("div[data-"+dnum+"="+id+"]");
        
        if (div1.length) {
            divs.push($(div1).attr("id"));
            var id1 = $(div1).data(dnum2);
            divs.push(id1);
            getLinkedDivs(id1, dnum);          // call itself with next id
        }
    }
</script>

 

Thanks again Barand, it works well, thank you.

 

I have a question: How do you think it's best to overcome the following?

 

What would I do if instead of

 

<div id="777" data-one="555" data-two="666">

 

was

 

<div id="777" data-one="666" data-two="555">

 

So it works like you did, but on ID 777 data-one and data-two are swapped around

 

Thanks