开发者

What is the equivalent of .Max() in jquery

开发者 https://www.devze.com 2023-04-02 06:23 出处:网络
I was wondering how can we write a jquery statement to get the max value of a property of matched elements.

I was wondering how can we write a jquery statement to get the max value of a property of matched elements.

in LINQ we say something like this:

var maxHeight = list.Max(a=> a.Height);

what is the best way to do this in jquery?

as an example let's say we want to select the max numer开发者_运维百科ic value of all :text elements inside a container:

var allInputs = $("#container :text");
// how to get the max of parseInt(item.val())?

of course having a loop over all elements is an option but I'm curious to know if there is a magic to do with jquery.

Regards.


One of the possible solutions is to use map function and then Math.max to the result:

var values = $.map($("input:text"), function(el, index) { return parseInt($(el).val()); });
var max = Math.max.apply(null, values);

If it is needed it might be written in one line.

fiddle: http://jsfiddle.net/WuVLr/1/

UPDATE:

Alternatively you can apply map in this way:

var values = $("input:text").map(function(index, el) { return parseInt($(el).val()); }).get();


Based on all the conversation here and my search in the net we can say that (at this time) there is no robust built-in jquery way to calculate .max() and .min() of a property of elements matching a selector.

From what Igor suggested I came up with the following two jquery functions which you can add to your project if you need to use .max() and .min() functionalities over and over:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}

$.fn.min = function(selector) { 
    return Math.min.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() );
}

// Usage:

var maxWidth = $("a").max(function() {return $(this).width(); });
var minWidth = $("a").min(function() {return $(this).width(); });

See a demo here: http://jsfiddle.net/NF7v7/3/


This could be a non-direct solution for that using an array:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var mySizes=new Array();
                $("input[type=text]").each(
                   function( intIndex ){
                      mySizes[intIndex] = $(this).val().length;
                   });
                var largest = mySizes.sort(function(a,b){return a - b}).slice(-1);
                alert("The maximun length is: " + largest);
            });
        </script>
    </head>
<body>
    <input type="text" value="Test"id="1"/>
    <input type="text" value="Goodbye"id="2"/>
    <input type="text" value="Bye"id="3"/>
    <input type="text" value="Hello"id="4"/>
    <input type="text" value="Hello world!"id="5"/>
    <input type="text" value="Hi"id="6"/>
</body>
</html>

Regards


I am the author of the open source project http://www.jinqjs.com Using jinqJs you could do the following:

You could get the max by doing this:

var result = jinqJs().from([2,5,4,6,7,8,3]).orderBy([{sort: 'desc'}]).top(1).select();  

or the min by doing this:

var result = jinqJs().from([2,5,4,6,7,8,3]).orderBy([{sort: 'desc'}]).bottom(1).select();  
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号