ReferenceError: $$ is not defined jQuery error?

Question

Here is a simple example of a group of divs that can be sorted either by their HTML content or by custom attribute values:

Sort alphabetically by HTML content

Sort low to high by the value of the attribute "sortweight"HTML:

I have tried following code and got error

ReferenceError: $$ is not defined

HTML

<div id="sortexample">
    <div class="sortitem" sortweight="5">Pears [sortweight: 5]</div>
    <div class="sortitem" sortweight="3">Apples [sortweight: 3]</div>
    <div class="sortitem" sortweight="1">Cherries [sortweight: 1]</div>
    <div class="sortitem" sortweight="4">Oranges [sortweight: 4]</div>
    <div class="sortitem" sortweight="2">Strawberries [sortweight: 2]</div>
</div>
        

            

JavaScript:

// sort all divs with classname 'sortitem' by html content
function sort_div_content() {
    // copy all divs into array and destroy them in the page
    divsbucket = new Array();
    divslist = $$('div.sortitem');
    for (a=0;a<divslist.length;a++) {
        divsbucket[a] = divslist[a].dispose();
    }

    // sort array by HTML content of divs
    divsbucket.sort(function(a, b) {
        if (a.innerHTML.toLowerCase() === b.innerHTML.toLowerCase()) {
            return 0;
        }
        if (a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) {
            return 1;
        } else {
            return -1;
        }
    });

    // re-inject sorted divs into page
    for (a=0;a<divslist.length;a++) {
        divsbucket[a].inject($('sortexample'));
    }
}

// sort by attributes - usage for our example: sort_div_attribute('sortweight');
function sort_div_attribute(attname) {
    // copy all divs into array and destroy them in the page
    divsbucket = new Array();
    divslist = $$('div.sortitem');
    for (a=0;a<divslist.length;a++) {
        divsbucket[a] = new Array();
        // we'vev passed in the name of the attribute to sort by
        divsbucket[a][0] = divslist[a].get(attname);
        divsbucket[a][1] = divslist[a].dispose();
    }

    // sort array by sort attribute content
    divsbucket.sort(function(a, b) {
        if (a[0].toLowerCase() === b[0].toLowerCase()) {
            return 0;
        }
        if (a[0].toLowerCase() > b[0].toLowerCase()) {
            return 1;
        } else {
            return -1;
        }
    });

    // re-inject sorted divs into page
    for (a=0;a<divslist.length;a++) {
        divsbucket[a][1].inject($('sortexample'));
    }
}

I dont know why i got this error

Answer 1

On the fifth line, it says divslist = $$('div.sortitem'); , but $$ is not defined. You have to use $ instead of $$.

divslist = $('div.sortitem'); This would be better