将所有子类应用于父元素答案

【问题标题】：Apply all child classes to parent elements将所有子类应用于父元素
【发布时间】：2012-04-30 17:54:59
【问题描述】：

我目前有以下标记：

<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>

我需要完成以下工作，通过从子 li 获取所有类并将它们仅应用于特定的 .foo：

<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>

到目前为止，我有以下内容，但它只是在获取第一个 li 类的阶段，它将它应用于所有 .foo div，而不是每个特定的。

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

非常欢迎任何指向正确方向的指针。

【问题讨论】：

请问您为什么要动态执行此操作，而不是仅仅更改原始 CSS？

标签： jquery html dom jquery-selectors

【解决方案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

【讨论】：

太棒了，谢谢。我刚刚进入迭代部分，摸索着，你完美地表达了。

【解决方案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 元素。

【讨论】：

【解决方案3】：

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

DEMO

【讨论】：