Find closest BoundingClientRect

Question

I have an array of ClientRect objects which I got by doing

var trackedElements = $('[track]');
var trackedBounds = [];
_.each(trackedBounds, function(elem) {
    return $(elem)[0].getBoundingClientRect();
});

What I also have is another element's bounding client rect.

var currentElement = $('.active')[0].getBoundingClientRect();

My question is, how do I find within trackedBounds, the closest north of currentElement?

score 0 · Answer 1 · answered Oct 01 '17 at 20:52

I think you can filter rects that are not north of currentElement:

trackedBounds = trackedBounds.filter(rect => rect.bottom > currentElement.top)

and sort remaining rects on their .bottom property:

trackedBounds = trackedBounds.sort((rect1, rect2) => rect1.bottom - rect2.bottom)

Result is first element of trackedBounds array:

let result = trackedBounds
    .filter(rect => rect.bottom > currentElement.top)
    .sort((rect1, rect2) => rect1.bottom - rect2.bottom)
    [0]

1 Answers1