使用jquery对基于索引的div进行排序

我基于它们当前所在的位置对3个div进行排序。排序工作正常，但我努力获取每个div的索引值。使用jquery对基于索引的div进行排序

的问题是，

当我点击（下箭头）的DIV 2它给我的指标值0，其中，因为它应该给我1
如果我点击的div 3（向上箭头）它给人的我0而不是2

HTML代码：

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

演示 - https://jsfiddle.net/gvyoj63a/2/

任何帮助，如果高度赞赏。

来源

2016-11-12 Prithviraj Mitra

您正在使用相同的ID对每个排序上/排序下来跨度。每个ID都必须是唯一的。 – gavgrif

是的。我会给予独特的IDS。谢谢。 –

变化

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

到

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

由于.parent（）选择其中包含了向上和向下箭头股利。

来源

2016-11-12 21:59:56 Martijn

这里是小提琴：https：//jsfiddle.net/gvyoj63a/3/ – Martijn

辉煌。工作很好。非常感谢。 –

您的选择器获取索引是选择包装箭头的div组，而不是项目div。

尝试类似：

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

来源

2016-11-12 21:59:29

谢谢安迪。现在理解了。再次感谢。 –

清洁代码

$("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); 
    } 
});

来源

2016-11-12 22:05:21 br3t

使用jquery对基于索引的div进行排序

回答

相关问题