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

應該可以解決這個問題，它使用closest（'div'）獲取外部div。