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

【问题标题】：Generate classes by alphabet extracting href element通过提取href元素的字母生成类
【发布时间】：2017-07-26 20:42:02
【问题描述】：

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

<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 属性，然后向该元素添加一个类。

$("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('');

谢谢

【问题讨论】：

您的示例标记没有嵌套的标记。您在 li 元素上有 href。

标签： jquery list variables alphabetical

【解决方案1】：

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

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

【讨论】：

谢谢，这行得通！。大写字母的另一个问题是相同的吗？我有一些类似 /collections/vendors?q=Mad 的 URL 不工作。显然，我将代码更改为 /collections/vendors?q=" + letter + " 但它不起作用
最简单的方法是在选择器$("li > a[href^='/pages/" + letter + "' i ]")的正则表达式部分添加一个不区分大小写的标志
感谢您的帮助！

【解决方案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>

【讨论】：