比较jQuery.each循环中的字符串

comparing strings within a jQuery .each loop

本文关键字:字符串 循环 jQuery each 比较      更新时间:2023-09-26

我正试图根据列表项的文本内容向该项添加一个类-在动态生成的菜单中突出显示项是一种变通方法,但该类会应用于所有列表项。是不是因为我在比较两种不同的变量而出错了?

    $(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'); 
                        };
                    });
            };
        });
    });

感谢您的建议,我们已经做出了改变,并投入了更多的诊断,但仍然无法取得突破。在这个版本中,"当前猫"类从未被添加:

    $(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'); 
                                 }
                        });
                    };
        });
    });

这是它的HTML:

    <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>

if ( listItem = trimmed )更改为if ( listItem == trimmed )

if ( listItem = trimmed ) {

应该是

if ( listItem == trimmed ) {
if ( listItem = trimmed )

这会将tridge分配给listItem,然后检查是否将某个值分配给了listItem,该值始终为true。

你需要做

if ( listItem == trimmed )

在您的代码中,由于空白和换行,这种比较永远不会成立。

if (listItem == trimmed) {

通过在if 前面添加控制台行[比警报好]来调试它

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

此外,为了提高性能,您不应该一次又一次地调用$(this)。它每次都会生成一个新的jQuery对象,这会使代码运行时间更长。将其缓存到一个变量中,然后反复使用该变量。

添加了replace方法来从列表项中的文本中去除空白和换行符,这段代码现在可以正常工作,但它突出了如果文本包含Unicode字符将出现的问题:

    $(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'); 
                                 }
                        });
                };
        });
    });