javascript - jQuery添加类，如果它存在于别处

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);
});

现场演示

笔记：

• 使用此代码，您无需“烧录”.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(' '));
    });
});

演示

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。