jQuery插件tinysort不起作用，不确定为什么

Question

This is the live site I'm messing around with.

The numbers which are on each picture are called via get_field() using php. (I'm using plugin "Advanced custom fields" to create a field where I enter a number when creating a post, in this case it's the protein amount. Then I call it with php so that it displays on top of picture like so:

<?php
$protein = get_field('grams_of_protein');
?>

<div class="portfoliooverlay"><a href="<?php the_permalink(); ?>"><span class="jrm-protein"><?php echo "$protein"; ?></span></a></div>

I added a span class of .jrm-protein so that I can target the spans of all the visible posts on the page since they all have the same html structure and all contain .jrm-protein.

I am trying to use the jquery plugin TinySort

The button in the sidebar on the site labeled "sort" has the following JS:

jQuery(document).ready(function() {

jQuery('#sorting-button').click(function() {
        jQuery('.jrm-protein').tsort();
    });
});

Can someone take a look at the site, and figure out why it isn't working?

I didn't register the plugin script, just enqueued it like this in my functions.php

wp_enqueue_script( 'jrm-custom-tinysortjs', get_template_directory_uri() . '/js/jrmcustomtinysort.js', array('jquery'), false );
wp_enqueue_script( 'jrm-customjs', get_template_directory_uri() . '/js/jrmcustom.js', array('jquery'), false );

On a side note, I added an overlay to the entire page that toggles when the button is clicked, just to make sure and show you that the JS file is working. Or at least the second one is.

=================================================================================

Update: I added a div with a bunch of spans at the bottom, and it works with those, so I guess the question is how can i get it to work across different containers? Should just be a selector issue (but not sure how to do it)

Answer 1

I don't plan on debugging your whole site, but I'll help with the first error I see:

Uncaught TypeError: Cannot call method 'getElementsByTagName' of null

var container = document.getElementById( 'site-navigation' ),
    button    = container.getElementsByTagName( 'h1' )[0],
    menu      = container.getElementsByTagName( 'ul' )[0];

You're setting container to a single element, not the document object. Either change container on the other 2 lines to document or change

var container = document.getElementById( 'site-navigation' ),

to

var container = document,