Question

我有一个大型网站，每个页面上有一个正文类与菜单项的类匹配。我要做的是编写一个简单的jQuery函数来检查body类是什么...然后搜索菜单，如果列表项有一个同名的类，它会向列表项添加一个活动类。

身体也有几个类......这就是为什么我认为这会起作用，使用is() ......

var matchingClass = $('body').attr('class');
if ( $('.sub-menu-container ul li').is('.'+matchingClass) ) {
    $(this).addClass('active');
}

但它没有做任何事情。我怎样才能重写这个以便它获取body类，然后在页面中搜索相同类名的菜单项并添加一个类？

由于

Answer 1

虽然下面的其他答案会有所帮助，但我认为这更接近您的尝试：

var cls = $('#test').attr('class').split(/\s+/);

$('div[class]').filter('.' + cls.join('.')).addClass('active1');
$('div[class]').filter(':not(.' + cls.join('.') + ')').addClass('inactive1');

http://jsfiddle.net/DMxUx/5

或使用您的代码：

var matchingClass = $('body').attr('class');

$('.sub-menu-container ul li')
    .filter('.' + matchingClass.split(/\s+/).join('.'))
    .addClass('active');

如果我误解（再次），如果您只想将一个 body课程与li相匹配：

$('div[class]').filter('.' + cls.join(',.')).addClass('active1');
$('div[class]').filter(':not(.' + cls.join(',.') + ')').addClass('inactive1');

http://jsfiddle.net/DMxUx/6/

使用$.hasClass()和for循环：

var cls = $('#test').attr('class').split(/\s+/);

console.log(cls);

$('div[class]').each(function ea(){
    var matches = 0;

    for (var i = 0; i < cls.length; i++) {
        if ($(this).hasClass(cls[i])) {
            matches++;
        }
    }

    if (cls.length == matches) {
        $(this).addClass('active').removeClass('inactive');
    } else {
        $(this).addClass('inactive').removeClass('active');
    }
});

使用：

<div id='test' class='test1 test2 test3'></div>
<div class='test1 test2 test3'></div>
<div class='test1 test3 test2'></div>
<div class='test1 test3'></div>

http://jsfiddle.net/DMxUx/2

Answer 2

如果我理解正确，您正在寻找一种方法来确定菜单项是否与正文中存在的类的任何相匹配。为此，您可能希望将body元素类拆分为它包含的所有classNames。

var classNames = document.body.className.split(/\s+/);

一旦你拥有了它，你就可以检查每一个。

var $menu = $(".sub-menu-container.works ul");
$.each(classNames, function(idx, value) {
    var $menuItem = $menu.find("." + $.trim(value));

    if ($menuItem.length) {
        // We found our menu item
    }
});

Answer 3

$(document).ready(function() {
    $('.sub-menu-container ul li').each(function() {
        var classes = this.classList;
        for (var i=0,len=classes.length; i<len; i++) {
            if ($('body').hasClass(classes[i])) {
                $(this).addClass('active');
            }
        }
    });
});

Answer 4

认为这可能是你之后的

// First get all classes of body by splitting them into an array
var classList =$('body').attr('class').split(/\s+/);
$.each( classList, function(index, bodyClass){
    // loop through each bodyClass and add active to all matching elements.
    $('.sub-menu-container ul li.' + bodyClass).addClass('active');
});

如果一个类使用jQuery匹配另一个类

4 个答案: