Search for two surrounding items in a list when clicking inside a list container

Question

Suppose I have a container containing a list of elements, 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> </div> 

Suppose the container and the elements have a reasonable distance, so you can click in the space between the two elements. I want to capture this click and then insert the new editable list item that the user clicked into. To be able to insert a new list item, I need to know either the item to be inserted after, or earlier.

I can catch this click on the container class. But after...

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

Does anyone know how to do this?

Answer 1

Assuming that the list is vertical and the elements are in the order in which they are displayed, you can use the click position of the event to compare with the positions of the elements on the page and add the list item accordingly: / p>

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

example: http://jsfiddle.net/niklasvh/qjcvf/

If the list is horizontal, you will use the X offset instead, but if it is vertical and horizontal, this will make the task harder.

Another approach is to add hidden elements between the elements of the list, which you could use as triggers when the user clicks on them to know exactly where the element is located relative to the elements of the list.

Answer 2

I would take the same approach as Niklas, although I added the following:

• Check if the container is the immediate target of the click to prevent the <li> button from being added as new elements are clicked.
• Use clone() to add a new item.

Something like that:

 $(".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

You can do this using indentation on objects (this is for horizontal elements)

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