Jump to content

jQuery Find DIV


brianwill76_2016
Go to solution Solved by brianwill76_2016,

Recommended Posts

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

 

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

  • Solution

 

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!

Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.