Question

我正在尝试将每个单独锚点中的不同类添加到其父<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脚本在一定程度上起作用，但它只是抓住它遇到的第一个锚类并将其添加到无序列表中的每个<li>标记。

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

非常感谢任何使其正常工作的帮助。

Answer 1

您应该使用this引用来查找该实例的正确父级，而不是再次选择它们，这会导致jQuery使用第一个a标记父li，然后获取该元素的类名。

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

您也可以使用$(function(){代替$(window).load(function () {在DOM准备就绪后立即运行，而不是在所有资产都加载后运行。

Answer 2

您应该使用$(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/

jQuery - 将子元素中的类添加到父元素

2 个答案: