Reputation:

comparing strings within a jQuery .each loop

I'm trying to add a class to a list item, based on the text content of the item - it's a workaround to highlight items in a dynamically generated menu, but the class gets applied to all the list items. Is it going wrong because I'm comparing two different kinds of variable?

    $(document).ready(function() {  
        $('article[id^=post]').filter(function(){
            var categorySelected = this.className.match(/\bcategory-\w+\b/).toString();
            var trimmed = categorySelected.replace(/^category-/,''); 
            if ( $(this).hasClass(trimmed) ) {
                alert ('article has category = true, location = ' + trimmed );
                    $('div#categories-3 li').each(function(index) {
                        var listItem = $(this).text().toLowerCase().replace(' ','-').toString();
                        if ( listItem = trimmed ) {
                            alert ('listItem = ' + listItem + ' trimmed = ' + trimmed); 
                            $(this).addClass('current-cat'); 
                        };
                    });
            };
        });
    });

..thanks for the suggestions, have made the change and put more diagnostics in, but still can't make the breakthrough. In this version the 'current-cat' class never gets added:

    $(document).ready(function() {  
        $('article[id^=post]').filter(function(){
            var categorySelected = this.className.match(/\bcategory-\w+\b/).toString();
            var trimmed = categorySelected.replace(/^category-/,''); 
                if ( $(this).hasClass(trimmed) ) {
                    alert ('article has category = true\nlocation = ' + trimmed + '\ntrimmed var is type of ' + (typeof trimmed) );
                        $('.cat-item').each(function(index) {
                            $(this).addClass('item-' + index);
                            var listItem = $(this).text().toLowerCase().replace(' ','-');
                            alert ( 'listItem var is type of ' + typeof listItem ) ;
                            if ( listItem == trimmed ) {
                                 alert ('listItem = ' + listItem + ' trimmed = ' + trimmed); 
                                 $(this).addClass('current-cat'); 
                                 }

                        });
                    };
        });
    });

here is the HTML it's for:

    <div id="container">
        <article id="post-49" class="post-49 post type-post status-publish format-standard hentry category-reykjavik reykjavik photograph">
            some content 
        </article>
        <div id="categories-3" class="widget widget_categories">
            <h4 class="widgettitle">
                Location 
            </h4>
            <ul>
                <li class="cat-item cat-item-1">
                    <a href="#">
                        Havana 
                    </a>
                </li>
                <li class="cat-item cat-item-3">
                    <a href="#">
                        London 
                    </a>
                </li>
                <li class="cat-item cat-item-13">
                    <a href="#">
                        Reykjavík 
                    </a>
                </li>
            </ul>
        </div>
    </div>

Upvotes: 3

Answers (5)

user1051317

Reputation:

With the addition of the replace method to strip whitespace and linefeeds from the text in the list items, this code now works as expected, but it highlights a problem which will occur if the text contains Unicode characters:

    $(document).ready(function() {  
        $('article[id^=post]').filter(function(){
            var categorySelected = this.className.match(/\bcategory-\w+\b/).toString();
            var trimmed = categorySelected.replace(/^category-/,''); 
                if ( $(this).hasClass(trimmed) ) {
                        $('.cat-item').each(function(index) {
                            var myListItem = $(this);
                            var theListItem = myListItem.text().toLowerCase().replace(' ','-');
                            theListItem = theListItem.replace(/(\r\n|\n|\r)/gm,'');
                            if ( theListItem == trimmed ) {
                                 myListItem.addClass('current-cat'); 
                                 }
                        });
                };
        });
    });

Upvotes: 0

epascarello

Reputation: 207501

In your code, the comparison is never true because of whitespace and line feeds.

if (listItem == trimmed) {

debug it by adding a console line [better than alert] in front of the if

console.log(listItem + "\t" + trimmed);
if (listItem == trimmed) {

Also for a performance boost, you should not keep calling $(this) over and over again. It make a new jQuery object each time which makes the code run longer. Cache it into a variable and use that variable over and over again.

Upvotes: 0