jQuery if和else语句都在执行

Question

我有一个脚本,如果页面标题与<a>标签的文本值匹配,将为元素添加一个类.我的脚本中的else语句是在没有任何页面标题与导航项匹配且活动链接分配给Home菜单项(即导航栏中的第一个)时覆盖.

我有一个像这样的菜单:

<ul class='menu'>
    <li> <a href="#">Home</a> </li>
    <!-- Page title - My Cool Website -->
    <li> <a href="#">About Us</a> </li>
    <!-- Page title - About Us -->
    // etc....
</ul>

这是脚本:

$(document).ready(function () {
    var title = $(document).attr("title");
    $(".menu li a").each(function (e) {
        var a = $(this).text();
        var exists = title.match(a);
        if (exists) {
            $(this).addClass("active");
        } else {
            $(".menu li a").first().addClass("active");
        }
    });
});

if和else语句似乎正在执行,因此第一个和匹配的元素现在都active添加了一个类.

我已经尝试过使用stopPropagation();并return false在我的发言结束时但没有成功.

谁能告诉我两者都在执行的原因？我假设我没有优雅地跳过DOM,但javascript有点生疏.

Answer 1

问题是你的每个循环,假设你在第二个循环中找到匹配但仍然每个循环继续,所以第一个元素将再次获得类

$(document).ready(function () {
    var title = $(document).attr("title");
    var exists;
    $(".menu li a").each(function (e) {
        var a = $(this).text();
        exists = title.match(a);
        if (exists) {
            $(this).addClass("active");
            return false;
        }
    });
    if (!exists) {
        $(".menu li a").first().addClass("active");
    }
});