Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

find elements that are stacked under (visually) an element in jquery

Tags:

jquery

if i have 2 divs (z index is not assigned), one layered over the over, can i use the reference to the top div to find which div is below it?

as far as the DOM structure goes, these two divs would be siblings. but visually they are stacked on one another.

here's an example:

<body>
<div id="box1" style="background:#e0e0e0;height:100px;width:100px;"></div>
<div id="box2" style="background:#000000;height:100px;width:100px;margin-top:-50px;"></div>
</body>

which results in this: enter image description here

so i'm trying to figure out, when having the black div, box2, a way to return box1 in jquery (using selectors), because box1 is beneath box2, using jquery.

like image 256
tipu Avatar asked Apr 08 '11 17:04

tipu


People also ask

How to select an element inside another element using jQuery?

You can use find option to select an element inside another. For example, to find an element with id txtName in a particular div, you can use like ....but $ ('span', $ ('#foo')); doesn't work? This method is called as providing selector context. In this you provide a second argument to the jQuery selector.

How to use find () method in jQuery?

jQuery find () Method 1 Syntax. The description of these parameters is given below. ... 2 jQuery find () Method to Find Descendant an Element. If you want to get the specified descendant elements for the selected element, you have to use the method as given ... 3 Return All Descendant Elements. ...

How to find all elements that are empty in jQuery?

How to finds all elements that are empty in jQuery ? - GeeksforGeeks How to finds all elements that are empty in jQuery ? In this article, we will see how to find all elements on the page that are empty using jQuery. Approach 1: The :empty selector can be used to get all elements in the page that are currently empty.

How to check if an element is hidden in jQuery?

In the case of <tr> jQuery does check the CSS display property, and considers an element hidden if its display property is set to none. Elements that have not been added to the DOM will always be considered hidden, even if the CSS that would affect them would render them visible.


2 Answers

Check if box1 is sharing the same position as a certain spot on the page.


And only because I'm a little bored, I made this awesome-er

http://jsfiddle.net/hunter/PBAb6/

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}
like image 189
hunter Avatar answered Sep 27 '22 19:09

hunter


Maybe something along these lines... detach the element under your cursor (in this case box1) and use document.elementFromPoint to fetch the next element underneath that x,y position.. rough example:

    var first_box = $('#box1');// more programmaticaly would be to use document.elementFromPoint to fetch the element under your cursor

    var first_box_offset = first_box.offset();
    var x = first_box_offset.left;
    var y= first_box_offset.top + first_box.height();

    var reattach_me = first_box.detach();
    var second_box = document.elementFromPoint(x, y);

    $('body').append(reattach_me);
like image 21
Jake Avatar answered Sep 27 '22 19:09

Jake