jQuery: как проверить, имеют ли два элемента один и тот же класс - PullRequest
Новая
       2

jQuery: как проверить, имеют ли два элемента один и тот же класс

3 голосов
/ 07 марта 2012

Есть ли способ проверить, имеют ли два элемента одинаковое имя класса?Мой код выглядит так ... 

<body class="foo bar cats">
<a href="#" class="foo">Link</a>
<a href="#" class="puppies">Link</a>

Я хочу добавить еще один класс к ссылке foo, если он соответствует классу в теле.Как я могу проверить, соответствует ли один из классов в моих ссылках классу в теле с jQuery?

Ответы [ 6 ]

5 голосов
/ 07 марта 2012

Я бы предложил: 

$('a').each(
    function() {
        var classes = this.classList;
        for (var i=0,len=classes.length; i<len; i++){
            if ($('body').hasClass(classes[i])){
                $(this).addClass('bodySharesClass');
            }
        }
    });​

JS Fiddle demo .

Отредактировано , чтобы попытаться учесть неспособность Internet Explorer понять / использовать / реализовать .classList: 

if (!document.createElement().classList){
    var useAttr = true;
}

$('a').each(
    function(i) {
        var classes = [];
        if (!useAttr){            
            classes = this.classList;
        }
        else {
            classes = $(this).attr('class');
        }
        for (var i=0,len=classes.length; i<len; i++){
            if ($('body').hasClass(classes[i])){
                $(this).addClass('bodySharesClass');
            }
        }
    });

JS Fiddle demo .

Отредактировано , поскольку, похоже, моя предыдущая попытка объяснить IE не удалась.Вздох.Еще!Этот подход должен работать, хотя я не могу его протестировать, поскольку у меня нет IE и Windows: 

$('a').each(
    function(i) {
        var classes = this.className.split(/\s+/);
        for (var i=0,len=classes.length; i<len; i++){
            if ($('body').hasClass(classes[i])){
                $(this).addClass('bodySharesClass');
            }
        }
    });

JS Fiddle demo .

Справочные материалы:

3 голосов
/ 07 марта 2012

хорошо, если я вас правильно понимаю, вы можете сделать что-то вроде этого ... 

var link = $(".foo");//or select your link another way
var linkClass = link.attr("class");
if($("body").hasClass(linkClass)){
   //link has matching class
   link.addClass("newClass");
}

Как вы можете видеть, я использовал функцию hasClass () JQuery для проверкиесли вкладка тела имеет соответствующий класс.

Если ваша ссылка может иметь более одного имени класса, вы можете сделать это следующим образом ... 

var link = $(".foo");//or select your link another way
var linkClass = link.attr("class");
var classList = linkClass.split(/\s+/);

var matchFound = false;

for(var i = 0; i < classList.length; i++){
    if($("body").hasClass(classList[i])){
       //link has matching class
       matchFound = true;
    }
}

if(matchFound){
    link.addClass("newClass");
}

Кроме того, если вы хотите обрабатывать все ваши ссылки одновременно, вы можете обернуть все это в JQuery each () и изменить первую строку следующим образом ... 

$("a").each(function(index){
   var link = $(this);

   //the rest of the above code here
});
1 голос
/ 07 марта 2012 
$('a').hasClass('foo').addClass('whatever');
0 голосов
/ 07 марта 2012 
var body_classes =$('body').attr('class').split(/\s+/);
var foo_link = $('a.foo');
$.each(body_classes, function(index, item){
    if (foo_link.hasClass(item)) {
       foo_link.addClass('class_you_want_to_add');
       return false; 
    }
});
0 голосов
/ 07 марта 2012

Вот одно предположение, могут быть и другие (которые лучше):) 

$(document).ready(function() {
    var $foo = $('.foo'); // select the foo link
    if ($(body).hasClass($foo.attr('class'))) {
        $foo.addClass('anotherClass');
    }
});
0 голосов
/ 07 марта 2012

Использование метода jquery hasClass () приведет к решению

...