How to follow moved div on page

Question

Lets say I have struckture like this:

<div id="stuff">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

The divs will be dynamically added, meaning I cant say how much there will be.

When I rearrange the divs with jquery, is there a way to acces one of them even after they are moved? Is there some dynamically way to add an id to them and/or is there another way to achieve this?

what did you want to access, and how would you like to access it ( clicking the div or selecting from dropdownlist or other method ) — Kyojimaru, Aug 06 '14 at 07:58
you can assign an Id when you are adding the div (some sort of counter id).. how are you adding the div. can you show more code. — nsthethunderbolt, Aug 06 '14 at 08:00

Pramod S. Nikam · Answer 1 · 2014-08-06T08:13:29.020

3

Give id to each div based on its sequence position like below:

<div>
  <div id='pos1'>1</div>
  <div id='pos2'>2</div>
  <div id='pos3'>3</div>
</div>

Then you can easily follow it using its position class irrespective its changed position.

alternatively you can use classes but they behaves slowly.

edited Aug 06 '14 at 08:13

answered Aug 06 '14 at 08:01

Pramod S. Nikam

4,271
4
38
62

1

be careful doing this. class names dont like starting with numbers. http://stackoverflow.com/a/449000/648350 – haxxxton Aug 06 '14 at 08:02
@haxxxton - Thanks for flashing light on class names. corrected my answer. – Pramod S. Nikam Aug 06 '14 at 08:04
no probs :) similarly, this would be a great option for using `id` rather than `class` given we want them to be unique :) – haxxxton Aug 06 '14 at 08:05
@haxxxton - edited answer to include your suggestion. – Pramod S. Nikam Aug 06 '14 at 08:08
How would I achieve this? With some kind of loop? – Ant1koerper Aug 06 '14 at 08:08
And why would you use a class and not an id? I heard that using an id is sligtly faster. – Ant1koerper Aug 06 '14 at 08:08
@Ant1koerper - Yeah you'll require a loop. – Pramod S. Nikam Aug 06 '14 at 08:09
@Ant1koerper - You are right ids are faster. reedited my answer to have that. – Pramod S. Nikam Aug 06 '14 at 08:14

score 0 · Answer 2 · answered Aug 06 '14 at 08:00

0

You must give and id to your div when you dynamically creat them. Maybe with JQuery :

.attr("id","myid");

answered Aug 06 '14 at 08:00

user3811547

3
3

1

Can you write a little more code? I would use 'myid' with a number at the end i guess?! – Ant1koerper Aug 06 '14 at 08:12

score 0 · Accepted Answer · answered Aug 06 '14 at 08:21

0

Just added a code snippet!

http://jsfiddle.net/q4273/

html:

<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" type="submit" value="Add Div">
<div id='parent'></div>

js:

$(function () {

    $("input[type=submit]").click(function () {
        // get the available children
        var len = $('#parent').children('div').length;

        //determine the id = length+1
        var id = "item" + (len + 1);

        // append the child
        $("<div id='" + id + "'/>").html(id).appendTo("#parent");
   })

});

answered Aug 06 '14 at 08:21

InnovWelt

660
1
8
21

thats great. When i wanted to delete a div I guess I would declare len before $("input[type=submit]").click(... and icrement it by one each time I add a new div?! Otherwise I could get two divs with the same id. – Ant1koerper Aug 06 '14 at 08:28
That should work! but btw, you did not mention that "divs can be deleted" in your question :-) – InnovWelt Aug 06 '14 at 08:57

How to follow moved div on page

3 Answers3