CODEWITHSUNDEEP
javascriptjquery
Wern Ancheta
Wern Ancheta

Reputation: 23297

Find and compare elements with matching attribute values in Jquery

How do I go on about selecting elements which has the same attribute values in jquery. And then comparing which of those 2 has a greater value.
Here is what I have so far. The problem that I'm having with this is that I don't really get any output if the first number in the pair is the larger one.

    <script>
    $(function(){
        var j = [];
        $('.loo').each(function(index){
            var grp = $(this).attr('data-x');
            var num = $(this).val();
            var id = $(this).attr('id');

            var pair_val = pair_value(grp);
            var pair_id = pair_identity(id);

            console.log(get_max(num, pair_val, id, pair_id));
        });

        function get_max(num1, num2, id1, id2){
            var decide = 0;
            if(num1 > num2){
                decide = id1;
            }else{
                decide = id2;
            }
            return decide;
        }

        function pair_value(conn){
            var pair = $("input[data-x="+ conn +"]").val(); //my problem is here
            return pair;
        }

        function pair_identity(conn){
            var pair_id = $("input[data-x="+ conn +"]").attr('id'); //my problem is here
            return pair_id;
        }


    });
    </script>

Html:

    <p>
    <input type="text" id="e" name="e" class="loo" value="1" data-x="a">
    </p>
    <p>
    <input type="text" id="f" name="f" class="loo" value="10" data-x="a">
    </p>
    <p>
    <input type="text" id="g" name="g" class="loo" value="37" data-x="b">
    </p>
    <p>
    <input type="text" id="h" name="h" class="loo" value="25" data-x="b">
    </p>
    <p>
    <input type="text" id="i" name="i" class="loo" value="11" data-x="c">
    </p>
    <p>
    <input type="text" id="j" name="j" class="loo" value="12" data-x="c">
    </p>

Upvotes: 1

Views: 5591

Answers (2)

Kokos
Kokos

Reputation: 9121

var highest = new Array();

$('.loo').each(function(){

    if(!highest[$(this).data('x')] || parseInt($(this).val()) > highest[$(this).data('x')] )
        highest[$(this).data('x')] = parseInt($(this).val());          

});

This will loop through all instances of .loo and checks if there is no entry yet or if the current saved value is lower than the current elements value, in that case it will update the array entry.

This will leave you with an array containing all max values for all possible values of data-x

EDIT

excuse me, some syntax errors were present.

EDIT 2

shorter version

http://jsfiddle.net/kkbkb/1/

Upvotes: 2

Jamiec
Jamiec

Reputation: 136094

The problem you're no doubt having is that you are comparing character strings (obtained with .val()), not numbers. This has a very different behviour - effectively deciding which one is alphabetically before another.

Change this line:

if(num1 > num2){

to

if(parseInt(num1,10) > parseInt(num2,10)){

Upvotes: 1

Related Questions