通过字母提取href元素生成类

Question

所以我有一个列表，例如：

<ul>
 <li href="pages/ade.html">ade</li>
 <li href="pages/ate.html">ate</li>
 <li href="pages/aca.html">aca</li>
 <li href="pages/bes.html">bes</li>
 <li href="pages/bon.html">bon</li>
 <li href="pages/cas.html">cas</li>
<ul>

我使用 jquery 获取 href 属性，然后向该元素添加 class。

$("li > a[href^='/pages/a']").parent().addClass( "brand-a" );
$("li > a[href^='/pages/b']").parent().addClass( "brand-b" );
$("li > a[href^='/pages/c']").parent().addClass( "brand-c" );

所以我不想为每个字母都写一个函数，我想我可以使用字母表来做到这一点。我环顾四周发现了这个，但我不知道如何实现它。

alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');

谢谢

Answer 1

我认为你必须循环，也许是这样的：

'abcdefghijklmnopqrstuvwxyz'.split('').forEach(function(letter){
    $("li > a[href^='/pages/" + letter + "']").parent().addClass( "brand-" + letter + "" );
});

Answer 2

您可以解析 href 以获取品牌字母

$('li > a[href*="pages/"]').each(function() {
  var brand = this.href.split('pages/')[1].charAt(0);
  $(this).parent().addClass('brand-' + brand);
});

.brand-a a { color: red }
.brand-b a { color: green }
.brand-c a { color: orange }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="pages/ade.html">ade</a></li>
  <li><a href="pages/ate.html">ate</a></li>
  <li><a href="pages/aca.html">aca</a></li>
  <li><a href="pages/bes.html">bes</a></li>
  <li><a href="pages/bon.html">bon</a></li>
  <li><a href="pages/cas.html">cas</a></li>
  <ul>

通过字母提取href元素生成类

Generate classes by alphabet extracting href element

variables

jquery

list

alphabetical