Using jQuery to find an element at a particular position?

JavascriptJquery

Javascript Problem Overview


Is there a method in jQuery to select an element located at a particular position?

For example, can I select the element that is located at left:100 and top:300 in absolute position?

It would be nice if I could select an element located in a range of positions, for example, select the element that is located left: 100 - 150 px top 200 - 280px.

Javascript Solutions


Solution 1 - Javascript

You are looking for the .elementFromPoint() JavaScript/DOM method.

var elem = document.elementFromPoint(100, 100) // x, y

That returns a DOM node, which of course then can be wrapped into a jQuery object:

$(elem).remove(); // for instance

I'm not that aware about the cross-browser compatibility and I would like some guys who know better to edit this post or write a comment about it.

Reference: .elementFromPoint()

Example Link: http://www.jsfiddle.net/YjC6y/22/

Solution 2 - Javascript

Provided you know the exact coordinates relative to the document:

function getElsAt(top, left){
    return $("body")
               .find("*")
               .filter(function() {
                           return $(this).offset().top == top 
                                    && $(this).offset().left == left;
               });
}

The other answer stops at the first overlay.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionThomas JohnView Question on Stackoverflow
Solution 1 - JavascriptjAndyView Answer on Stackoverflow
Solution 2 - JavascriptCees TimmermanView Answer on Stackoverflow