Count Table Rows then addClass

I'm trying to addClass to make a link appear when there are 20 table items.

I have more than one table on the page, each one is inside of a div.box

What I want to do is if there are 20 tr rows addClass to make a link visible. This needs to happen to each individual table, how would I go about setting this up?

So far I've got:

    $(document).ready(function(){
    $(".box tr.table-row").length;


    $('a.single-product-link').addClass('visible');
});

But I don't know how to do the "if there are 20 tr.table-row addClass" section. Any suggestions would be appreciated.

I'm running the same function for every .box element, because they have to be handled separately. In the function, the table rows inside the div are counted, and if there is more than 20, a class is added to the link inside the div.

$('.box').each(function () {
    var $this=$(this);
    if ($this.find('tr.table-row').length > 20) {
        $this.find('a.single-product-link').addClass('visible');
    }
});

jsFiddle Demo

Another possible variation (using the function parameter for .addClass(), and inside the function finding the closest .box and counting its table rows):

$('a.single-product-link').addClass(function () {
    if ($(this).closest('.box').find('tr.table-row').length > 20) {
        return 'visible';
    }
});

jsFiddle Demo