带有hasClasses的jQuery classList [英] Jquery classList with hasClasses

问题描述

我正在尝试向每个li元素添加.active类，但前提是#books与#post具有相同的类/类.

Im trying to add a .active class to every li element, but only if #books has the same classes/class as #post does.

但是classList函数似乎无法与hasClasses函数一起使用.

But the classList function seems not to work with hasClasses function.

var classList =$('#post').attr('class').split(/\s+/);
$.each( classList, function(index, item){
});
$.fn.extend({
 hasClasses: function( selector ) {
    var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
        rclass = /[\n\t\r]/g,
        i = 0,
        l = this.length;
    for ( ; i < l; i++ ) {
        if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
            return true;
        }
    }
    return false;
}
});
if ($('#books').hasClasses(classList)) {
$('li').addClass('active');

}

推荐答案

使用.is(".classA.classB.classC")

如果选择器有多个类..可以说

If selector has multiple classes.. lets say

<a href="#" class="link a b c">Some link</a>

$('.link').is('.a.b.c')将返回true.

JSFIDDLE DEMO

或根据需要使用以下功能.hasClasses(["classA","classB","classC"])检查选择器是否具有类列表. hasClasses将字符串数组作为输入.

or as you wanted Use the below function .hasClasses(["classA","classB","classC"]) to check if the selector has the list of classes. hasClasses takes an array of strings as an input.

JSFIDDLE DEMO 2

$.fn.extend({
    hasClasses: function (classArray) {
        var $this = $(this);
        var classList = '.' + classArray.join('.');
        console.log(classList);
        //Use .is() to check if the classes are present in the selector
        if ($this.is(classList)) {
            return true;
        }
        return false;
    }
});

var classArray = $('#post').attr('class').split(/\s+/);
console.log("Comma separated classes:" + classArray);

var result = $('#post').hasClasses(classArray);

alert("Selector contains these classes? " + result);

这篇关于带有hasClasses的jQuery classList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！