3

I have a list of elements (with class "newsitem"), that are available throughout the page. I want the highest element, that is the element with the lowest "top" value from that class. How do I get in jQuery efficiently, right now I'm working on iterating through the newsitem class, storing the top value and comparing it with the lowest value so far. Is this pretty much the only way to do it or is there an actual method?

Thanks!

PS: This method is the closest to what I'm doing right now: How to get height of the highest children element in javascript/jQuery?

PPS I have a 50% answer rate only because 2 of my questions so far don't have relevant answers.

Community
  • 1
  • 1
StackOverflowed
  • 5,854
  • 9
  • 55
  • 119
  • I don't know of any shortcut for this one, basically you'll need to do a jquery selector and use the `each` method and `.css('top')` to compare values. It's worth noting that even if there was a shortcut function for this, it would probably still be looping just like you are internally and hence wouldn't be likely to be more efficient (although it might look nicer) – joshuahealy Mar 15 '12 at 03:58
  • You could search for a jquery plugin that suits your needs though, you never know if this has been solved by someone else already :) – joshuahealy Mar 15 '12 at 03:59

2 Answers2

3

I believe this should work (but i haven't test it yet)

function get_topmost_element(selector) {
    var top = 0,
        el;
    $(selector).each(function(){
        var offset = $(this).offset();
        if (offset.top > top) {
            highest = offset.top;
            el = $(this);
        }
    });

    return el;
}

Usage

get_topmost_element('.newsitem');
Rezigned
  • 4,901
  • 1
  • 20
  • 18
  • I think I get where you're going, but what precisely do you think the 'this' variable will be in the function passed to your inlined `.each()`? `this` has function-level scope. I think you want something like `.each( function(index, Element){...} ); ` and operate on `Element` instead of $(this). 'this' will be the function you are in. Reference : http://api.jquery.com/each/ – dwerner Mar 15 '12 at 04:44
  • @DanielNWerner I guess you misunderstood, from the link that you provided `this.style.color = "blue";` the demo use same style here. `this` always refer to current element (you should take a look at the example on that page first) – Rezigned Mar 15 '12 at 05:02
  • Interesting that jQuery sets the execution scope to that of the DOM element, but then why do another DOM lookup with $(this) when you have the element if you provide a parameter list? – dwerner Mar 15 '12 at 05:20
  • I just lazy to remember which one come first between (index and element) Maybe later jQuery team decide to swap it around (just stupid example) but my code still work. – Rezigned Mar 15 '12 at 05:29
  • There's a lot wrong with this code. `highest` should be `top`; `>` should be `<`; and I would change `(offset.top < top)` to `(!el || offset.top < top)`... Currently this gets the *lowest* element, even after you fix the undeclared variable error. – Devin Burke Oct 06 '17 at 23:13
0

I guess $(".newsitem:first") should do it.

Sang Suantak
  • 5,213
  • 1
  • 27
  • 46
  • 1
    $(".newsitem:first") doesn't work if the elements are not in order. If the first element is lower than the second one, $(":first") returns the "first" element. – StackOverflowed Mar 16 '12 at 02:48