Question

jQuery(document).ready(function () {
    var totaltr = $("#catlist_ul").html().find('a').length; 
    $('#cog1').hide();
    var htmlBlock = "<strong>" + totaltr + " ITEMS</strong>";
    totalProductList.innerHTML += htmlBlock;
});

<table id="catlist_ul">
<tr><td><a href="#">link</a><a href="#">link</a></td></tr>
<tr><td><a href="#">link</a><a href="#">link</a></td></tr>
</table>

Should return 4 ITEMS.

Answer 1

All you need is:

$('#catlist_ul a').length

.html() gets the innerHTML of the provided selector, which is not what you want. Please review the jQuery API

---

Instead of using jQuery(document).ready, you should use the aliasing shortcut:

jQuery(function ($) {
  //same as $(document).ready()
});