Sorting divs based on index using jquery

Question

I am sorting 3 divs based on the position they are currently in. The sorting works fine but I am struggling to get the index value for each div.

The problem is,

when I click (down arrow) for div 2 it gives me the index value 0 where as it should give me 1.
If I click div 3 (up arrow) it gives me 0 instead of 2

Html code:

<div class="flow-container">
  <div class="flow-block">
    <div class="sort-arrows">
      <span class="fa fa-arrow-up" id="sort-up"></span>
      <span class="fa fa-arrow-down" id="sort-down"></span>
    </div>
    <div class="flow-content" data-key="2yqz1jpdxwy2g434zyo8r7k6vml9n50d">
      <h3 class="bg-primary">Div 1</h3>
    </div>
  </div>
  <div class="flow-block">
    <div class="sort-arrows">
      <span class="fa fa-arrow-up" id="sort-up"></span>
      <span class="fa fa-arrow-down" id="sort-down"></span>
    </div>
    <div class="flow-content" data-key="q2qlvpm98n7d2kejzx3g5jy41r6wzx0p">
      <h3 class="bg-primary">Div 2</h3>
    </div>
  </div>
  <div class="flow-block">
    <div class="sort-arrows">
      <span class="fa fa-arrow-up" id="sort-up"></span>
      <span class="fa fa-arrow-down" id="sort-down"></span>
    </div>
    <div class="flow-content" data-key="q2qlvpm98n7d2kejzx3g5jy41r6wzx0p">
      <h3 class="bg-primary">Div 3</h3>
    </div>
  </div>
</div>

Demo -- https://jsfiddle.net/gvyoj63a/2/

Any help if highly appreciated.

You are using the same id's for each of the sort-up / sort-down spans. Each Id needs to be unique. — gavgrif
– gavgrif, Commented Nov 13, 2016 at 0:29

Martijn · Accepted Answer · 2016-11-12 21:59:56Z

2

Change

var pos = $(this).parent().index();

into

var pos = $(this).closest('.flow-block').index();

As .parent() selects the div which contains the up and down arrows.

answered Nov 12, 2016 at 21:59

Martijn

5146 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prithviraj Mitra Over a year ago

Brilliant. Worked great. Thank you so much.

Andy Mac · Accepted Answer · 2016-11-12 21:59:29Z

1

Your selector for getting the index is selecting the div group that's wrapping the arrows, not the item div.

try something like:

var pos = $(this).parent().parent().index();

answered Nov 12, 2016 at 21:59

Andy Mac

3792 silver badges9 bronze badges

1 Comment

Prithviraj Mitra Over a year ago

Thanks Andy. Understood now. Thanks once again.

br3t · Accepted Answer · 2016-11-12 22:05:21Z

0

Cleaner code

$("body").on('click tap', '.fa-arrow-down, .fa-arrow-up', function(e) {
  e.preventDefault();
  var elem = $(this).closest(".flow-block");
  var pos = elem.index();
  alert(pos);
  if($(this).hasClass('fa-arrow-down')) {
    elem.next().after(elem);
  } else {
    elem.prev().before(elem);
  }
});

answered Nov 12, 2016 at 22:05

br3t

1,6582 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

Sorting divs based on index using jquery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related