从列表中追加类到URL

Question

我有一个无序列表。我想追加URL后面每个元素的类。但我该怎么做？

这里是我的代码：

$("li").each(function(index) {  
 
    var newClass = $(this).attr('class');   
 
    console.log(newClass);  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="dropdown-menu-sub AAA "> 
 
    <li class="c76"><a href="url1/">url1</a></li> 
 
    <li class="c77"><a href="url2/">url2</a></li> 
 
    <li class="c78"><a href="url3/">url3</a></li> 
 
</ul>

这就是我想要的：

<ul class="dropdown-menu-sub AAA "> 
     <li class="c76"><a href="url1/#c76">url1</a></li> 
     <li class="c77"><a href="url2/#c77">url2</a></li> 
     <li class="c78"><a href="url3/#c78">url3</a></li> 
    </ul> 

Fiddle。

Answer 1

可以使用.attr()功能来更新锚的href。

这里在这个例子中，我使用了重载的.attr(attributeName, function)，它设置了href属性和函数返回的值。

$(function() { 
 
    $("li a").attr('href', function(_, href) { 
 
    var newClass = $(this).closest('li').attr('class'); 
 
    return href +'#'+ newClass; 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="dropdown-menu-sub AAA "> 
 
    <li class="c76"><a href="url1/">url1</a> 
 
    </li> 
 
    <li class="c77"><a href="url2/">url2</a> 
 
    </li> 
 
    <li class="c78"><a href="url3/">url3</a> 
 
    </li> 
 
</ul>