應用所有子類的父元素

Question

目前，我有以下標記：

<div class="foo"> 
    <ul class="bar"> 
    <li class="a"></li> 
    <li class="b"></li> 
    </ul> 
</div> 

<div class="foo"> 
    <ul class="bar"> 
    <li class="c"></li> 
    <li class="d"></li> 
    </ul> 
</div> 

，我需要和了下面，通過讓各階層形成的孩子裏，並把它們應用到只有特定的。富：

<div class="foo a b"> 
    <ul class="bar"> 
    <li class="a"></li> 
    <li class="b"></li> 
    </ul> 
</div> 

<div class="foo c d"> 
    <ul class="bar"> 
    <li class="c"></li> 
    <li class="d"></li> 
    </ul> 
</div> 

到目前爲止，我有以下，但它只能在獲得第一類裏的階段是，它適用於相對於每個特定所有包含.foo的div。

$(".foo").addClass($('.bar li').attr('class')); 

任何指向正確方向的指針都非常受歡迎。

Answer 1

您需要迭代在.foo元素，然後獲取類他們各自的後代的：

$('.foo').each(function() { 
    $(this).addClass($(this).find('.bar li').map(function() { 
     return this.className; 
    }).get().join(' ')); 
}); 

參考：each，map，get

的其他，雖然較慢的方法，因爲.foo查找，將是：

$('.bar li').each(function() { 
    $(this).closest('.foo').addClass(this.className); 
}); 

參考：closest

Answer 2

下面是一些代碼，做你需要做什麼：

$('.foo').each(function(i, elem) { 
    get_child_classes(this,elem); 
}); 

//the function you need 
function get_child_classes (parent,current){ 
    $(current).each(function(i, elem) { 
     $(elem).children().each(function(j, elem1){ 
      $(parent).addClass($(elem1).attr('class')); 
      get_child_classes (parent, elem1); 
     }); 
    }); 
} 

在這裏看到小提琴：http://jsfiddle.net/Zpx8R/ 此代碼應爲所有單元工作，不管它是什麼類型的HTML元素。

Answer 3

$('.foo').addClass(function() { 
    var cls = ''; 
    $('li', this).each(function() { 
     cls += this.className.concat(' '); 
    }); 
    return cls; 
    }); 

DEMO