檢查元素是高於或低於與jQuery

Question

我有興趣以下DOM結構DOM：

<div id="portfolioItems"> 

    <div class="portfolioItemsLine"> 
     <div class="portfolioItem selected">1</div> 
     <div class="portfolioItem">2</div> 
    </div> 
    <div class="portfolioItemsLine"> 
     <div class="portfolioItem">3</div> 
     <div class="portfolioItem">4</div> 
    </div> 

</div> 

每個.porfolioItem附加有點擊處理程序。在click處理函數中，我需要確定$（'。portfolioItem.selected'）是否位於當前點擊的portfolioItem之上，或者位於它下面。

確定中的問題是由於每個兩個portfolioItem都被「打包」到item line div中引入的。

我該如何檢查.selected項目的上/下定位？

Answer 1

我建議：

$('.portfolioItem').click(
    function(){ 
     var selectedAt = $('.portfolioItem.selected').index('.portfolioItem'), 
      curIndex = $(this).index('.portfolioItem'); 
     if (curIndex > selectedAt){ 
      // the clicked item is 'later' than the .selected item in the DOM 
      console.log('"later"'); 
     } 
     else if (curIndex < selectedAt){ 
      // the clicked item is 'earlier' than the .selected item in the DOM 
      console.log('"earlier"'); 
     } 
     else if (curIndex == selectedAt){ 
      // the clicked item is the .selected item 
      console.log('"equal"'); 
     } 
    });​ 

JS Fiddle demo。

參考文獻：

• index()。

Answer 2

使用index()函數，它在集合中查找元素。如果選擇得當，收集的元素是一個「平坦」列表（你不必擔心「div/line」類）:)

$(".portfolioItem").click(
    function() 
    { 
     var items = $("#portfolioItems .portfolioItem"); 
     var selected = $("#portfolioItems .selected"); 
     var i = $(items).index(selected); 
     var j = $(items).index(this); 
     console.log(i,j); 
     // compare i and j to understand if above or below 
    } 
);​