從列表中追加類到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>