Understanding simple sorting script , that compares values

Question

I was just searching for a simple jquery sorting script and found this online:

$(function() {
    $('ol').each(function() {
        var matches = $('li', this).filter(function() { // Each item
            var text = $(this).text();
            return $('ul.three li').filter(function() { // Are there matches in .three?
                return $(this).text() == text;
            }).length > 0;
        }).length;
        $('li:last', this).text((matches * 10) + ' Points');
    });
});

FIDDLE HERE

Notice how the values of the first 2 tables are compared with that of the values of the third table. now my question is about how matches is incremented, i went through the whole script, but don't quite understand how matches gets a value of 4 and 2 for the first and second table respectively(displayed in the respective table as 40 and 20). I understand the usage of the filter function, but don't quite understand how matches gets its value, I know the length property is involved, i see it at the end of the return statement, But still don't quite understand how is matches incremented ?

filter returns the elements that matched the filter, basically, and then length returns the size of the items array.. What is it exactly what you don't understand? — Pablo Matias Gomez
– Pablo Matias Gomez, Commented Jul 17, 2015 at 18:58
@PabloMatíasGomez , how does match get populated with 4 the first time ? , if you can answer this , you've answered my question . — Alexander Solonik
– Alexander Solonik, Commented Jul 17, 2015 at 19:03
Ii iterates every li in that ol and compares each of them to see if it's texts is in any of the li's in .three .. And as you can see, there are four. So the filter returns that four li elements in an array (not reaaly an array, but a "jQuery array") and then, the length is 4. — Pablo Matias Gomez
– Pablo Matias Gomez, Commented Jul 17, 2015 at 19:10

Pablo Matias Gomez · Accepted Answer · 2015-07-17 19:16:26Z

2

$(function() {
    $('ol').each(function() {
        var matches = $('li', this).filter(function() { // Each item

Here it will iterate over every li item that ins contained inside the ol element that is currently being iterated

            var text = $(this).text();
            return $('ul.three li').filter(function() { // Are there matches in .three?
                return $(this).text() == text;
            }).length > 0;

Here it will search in the ul with the class three if there is any li that has the same text as the one li that is being iterated. The filter function will return every element that matches the search, of course if all texts are different, it will return one element or none. Therefore, when it checks for it length > 0 what is doing is checking if there was at least one element that matched (aka: if this text was in .three. So here if it returns true, it will we counter for the previous filter.

        }).length;

Here, the same as before, but with the outer filter, to check how many where found. Therefore, for the first one, the value is 4.

        $('li:last', this).text((matches * 10) + ' Points');
    });
});

answered Jul 17, 2015 at 19:16

Pablo Matias Gomez

6,8338 gold badges41 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Solonik Over a year ago

@Pablo Thanks ! will go though ur answer !

Collectives™ on Stack Overflow

Understanding simple sorting script , that compares values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related