使用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進行排序

回答

相關問題