發現列表中的兩個周圍的元素時，點擊列表

Question

假設我有一個包含項目列表的容器，在容器內使標記看起來像

<div class="container"> 
    <div class="list-item" id="item-1"> ....</div> 
    <div class="list-item" id="item-3"> ....</div> 
    <div class="list-item" id="item-2"> ....</div> 
    <div class="list-item" id="item-6"> ....</div> 
</div> 

假設容器和項目具有合理的間距，所以可以點擊兩個項目之間的空間。我想要的是捕獲該點擊，然後在用戶點擊的位置插入一個新的，可編輯的列表項。爲了能夠插入新的列表項目，我需要知道要插入的項目之後或之前。

我能夠捉對container類點擊。但後來...

我想從點擊獲得位置，最重要的是：我想獲得最接近的（周邊）list-item s，所以我可以插入一個新的list-item。

沒有任何人有任何想法如何着手呢？

Answer 1

隨着假定該列表是垂直的，元件位於它們出現，你可以使用事件點擊位置來比較頁面上的元素的位置，並相應地添加列表項，像這樣的順序：

$(".container").click(function(e){ 
    $(this).find(".list-item").each(function(el){ 

     if ($(this).offset().top > e.pageY) { 

      // insert after this 
      $('<div />').addClass('list-item').text('...').insertBefore(this); 

      return false; 
     } 
    }); 

}); 

例如：http://jsfiddle.net/niklasvh/qjcvf/

如果該列表是水平的，你會用X來代替偏移，但如果它是垂直和水平，它將使任務較爲困難。

另一種方法是在中間添加列表項，你可以使用，當用戶點擊它們作爲觸發器，以知道確切位置，元素的定位相對於列表項隱藏要素。

Answer 2

我將採取相同的方法尼克拉斯，雖然增加了以下內容：

• 檢查，看是否容器是點擊的直接目標，以防止在<li>點擊的自己添加新項目。
• 使用clone()添加新項。

事情是這樣的：

$(".container").click(function(e) { 
    var container = $(this); 

    if (container.is(e.target)) { 

     container.find(".list-item").each(function(index, element) { 
      var el = $(element); 

      if (el.offset().top > e.pageY) { 
       el.clone().text('...').insertBefore(element); 

       return false; 
      } 
     }); 
    } 
}); 

的jsfiddle：http://jsfiddle.net/PPvG/t43y2/

Answer 3

可以使用上的對象填充（這是橫向項目）做

的jsfiddle：http://jsfiddle.net/5kUWp/26/

JS：

$('div.list-item').live('click',function(e){ 
    var diff=e.pageX - this.offsetLeft; 
    if(diff>$(this).width()) { 
    var div = $('<div />'); 
    div.addClass('list-item'); 
    div.html($(this).text()+'....'); 
    div.attr('id','item-new'); 
    $(this).after(div); 
    } 
}); 

CSS：

div.list-item { 
    padding-right:14px; 
    margin:4px; 
    float:left; 
    border-right:1px dotted #444; 
}