JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div id="c4-breadcrumbs-id10T">
    <div class="breadcrumbs"><a href="index.html" class="c4-breadcrumbs">Home</a> &gt; <a href="baby-gift-ideas.html" class="c4-breadcrumbs">Shower Themes</a> &gt; <span class="c4-breadcrumbs-last">Little Red Wagons</span>

    </div>
    <div class="breadcrumbs"><a href="index.html" class="c4-breadcrumbs">Home</a> &gt; <span class="c4-breadcrumbs-last">Little Red Wagons</span>

    </div>
    <div class="breadcrumbs"><a href="index.html" class="c4-breadcrumbs">Home</a> &gt; <a href="unique-baby-gifts.html" class="c4-breadcrumbs">Unique Baby Gifts</a> &gt; <span class="c4-breadcrumbs-last">Little Red Wagons</span>

    </div>
</div>

JavaScript

function getCookieVal() {
    return [{
        title: 'Home'
    },{
        title: 'Unique Baby Gifts'
    }];
}

function matchBreadCrumbs() {
    /*                if (!bcPresence) {
                    getBreadcrumbs();
                    return;
                }
*/
    console.log('###################');
    console.log(' matchBreadCrumb() ');
    console.log('###################');

    var bcTrailAll = $('.breadcrumbs');

    console.log('# of breadcrumb trails', bcTrailAll.length);
    // if there is only one cookie trail, grab it and exit this function
    if (bcTrailAll.length === 1) {
        console.log('only one breadcrumb trail, so grab it!');
        //   getBreadCrumbs();

    } else {

        // loop through all .breadcrumb <div>s and find <a>s
        // then compare titles
        var currentCookieVal = getCookieVal();
        bcTrailAll.each(function (i) {
            var linkEls = $(this).find('a');
            var match = false;

            console.log(".breadcrumbs #" + i);
            console.log("##### TEST BREADCRUMB #####");

            alert('currentCookieVal.length' + currentCookieVal.length);
            alert('linkEls.length' + linkEls.length);
            if (currentCookieVal.length === linkEls.length) {
                for (var j = 0, len = linkEls.length; j < len; j++) {
                    console.log('found:' + linkEls[j].text + ", looking for:" + currentCookieVal[j].title);
                    if (linkEls[j].text === currentCookieVal[j].title) {
                        match = true;
                        console.log('match', linkEls[j].text);
                    } else {
                        console.log("##### FAIL!!! - TRY NEXT BREADCRUMB #####");
                        match = false;
                        break;
                    }
                }
                console.log("currentCookieVal.length", currentCookieVal.length);
                console.log("linkEls.length", linkEls.length);
                if...