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>

我需要通过以下方式来完成以下任务：将所有类形成为子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'));

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

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

将所有子类应用于父元素

3 个答案: