finding the two surrounding elements in a list when click inside the container of a list

Suppose I have a container containing a list of items, so the markup looks something like

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

Suppose the container and the items have reasonable spacing, so it is possible to click in the space between two items. What I want is to capture that click and then insert a new, editable list-item where the user clicked. To be able to insert a new list-item, I will need to know either the item to insert after, or before.

I am able to catch that click on the container class. But then …

I would like to get the position from the click, and most importantly: I would like to get the closest (surrounding) list-items so I can insert a new list-item.

Does anybody have any idea how to go about this?

newest questions tagged jquery – Stack Overflow

About Admin