Question

我刚刚编写了下面的代码，将一个类添加到匹配的外部div中。现在我知道必须有更优雅的方式来实现以下目标！

if ($(".cur").hasClass("one")) { $("#outer").addClass("one"); }
if ($(".cur").hasClass("two")) { $("#outer").addClass("two"); }
if ($(".cur").hasClass("three")) { $("#outer").addClass("three"); }
if ($(".cur").hasClass("four")) { $("#outer").addClass("four"); }
if ($(".cur").hasClass("five")) { $("#outer").addClass("five"); }
if ($(".cur").hasClass("six")) { $("#outer").addClass("six"); }

很高兴收到任何改进：）

Answer 1

var classNames = '';    
$('.cur').each(function(){
    if (classNames.indexOf(this.className + ' ') === -1)
        classNames += this.className + ' ';
});

var classes = classNames.split(" ");
var $outer = $('#outer');    
$.each(classes, function(index, value){
    if (value !== 'cur')  
        $outer.addClass(value);
});

Live DEMO

备注：

使用此代码，您无需在代码中“刻录”.cur的类，它会自动完成。

它将复制.cur的所有类别（cur本身除外），因此您可以自行决定是否对您有好处。

Answer 2

您可以使用regEx找到匹配的类，然后将匹配的类添加到#outer。见下文，

$(function () {
    var regClasses = /(one|two|three|four|five|six)/g;
    var $cur = $('.cur'),
        $outer = $('#outer');

    $cur.each(function () {        
        $outer.addClass(this.className.match(regClasses).join(' '));
    });
});

DEMO

Answer 3

这个怎么样：

var classes = ['one', 'two', 'three'],
    $cur = $('.cur'),
    $outer = $("#outer");

$.each(classes, function(i, v) {
    if ($cur.hasClass(v)) $outer.addClass(v); 
})

或迭代可以实现为纯粹的js，如：

for (var i in classes) {
    var v = classes[i];
    ....
}

或（更好）改为使用for：

var len = classes.length;
for (var i = 0; i < len; i++) {
    var v = classes[i];
}

Answer 4

这应该更快，因为它不会在每次迭代时调用.hasClass：

// define which classes you want to match
match_classes = ["one", "two", "three", "four"];
// grab all the classes on the inner element
elm_classes = $(".cur").attr("class").split(" ");
// cache the outer element for quick access
$outer = $("#outer");

// iterate over the list of classes you want to match
$.each(match_classes, function(i, val){
// if one of those classes exists on inner, add it to outer
  if(elm_classes.indexOf(val) > -1) $outer.addClass(val);
});

Answer 5

var classes = ['one', 'two', 'three', 'four', 'five', 'six'];
$.each(classes, function(key, value){
    if($('.cur').hasClass(value)) $('.cur').closest('div').addClass(value); 
});

应该这样做，它使用最接近的（'div'）来获得外部div。

jQuery在其他地方存在时添加类

5 个答案: