0

我目前有以下标记：

<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，而不是每个特定的 div。

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

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

4

3 回答 3

3

您需要遍历.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

于 2012-04-30T17:59:29.577 回答
0

这里有一些代码可以完成您需要做的事情：

$('.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 元素。

于 2012-04-30T18:09:55.860 回答
0 
  $('.foo').addClass(function() {
    var cls = '';
    $('li', this).each(function() {
        cls += this.className.concat(' ');
    });
    return cls;
  });

演示

于 2012-04-30T18:10:37.883 回答