javascript - jQuery - 将类从子元素添加到父元素

Question

我正在尝试将每个单独 anchor 的不同类添加到它们的父级 <li>标签。一般的 HTML 代码如下所示:

<ul class="list">
  <li>
    <div>Title Text</div>
    <span class="tag"><a href="#" class="Class1">Class1 Link</a>, <a href="#" class="Class2">Class2 Link</a>, <a href="#" class="Class3">Class3 Link</a></span>
  </li>
  <li>
    <div>Title Text</div>
    <span class="tag"><a href="#" class="Class4">Class4 Link</a>, <a href="#" class="Class5">Class5 Link</a>, <a href="#" class="Class6">Class6 Link</a></span>
  </li>
</ul>

我所拥有的最接近的 jQuery 脚本在一定程度上起作用，但它只是捕获它遇到的第一个 anchor 类并将其添加到每个 <li> 中。无序列表中的标记。

$(window).load(function () {
    $('span.tag a').each(function(){
        var tagClass = $(this).attr("class");
        $('span.tag a').closest('li').addClass(tagClass);
});

如果您能帮助我们正常工作，我们将不胜感激。

Answer 1

你应该使用$(this)而不是$('span.tag a')，后者选择所有的a元素以及随后的所有父 li 元素。您还可以使用 .addClass() 回调函数:

$('ul.list > li').addClass(function() {
    return $('span.tag a[class]', this).map(function() {
        return this.className;
    }).get().join(' ');
});

http://jsfiddle.net/UXSa7/