Question

I currently have the following markup:

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

And I need to and up with the following, by getting all classes form the child li and applying them to only that specific .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>

So far I have the following, but it’s only at the stage of getting the first li class and it applies it to all .foo divs as opposed to each specific one.

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

Any pointers in the right direction are very welcome.

Answer 1

You need to iterate over the .foo elements and then get the class of each of their respective descendants:

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

Reference: each, map, get

An other, though slower method, because of the .foo lookup, would be:

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

Reference: closest