javascript - 添加具有不同查询的列表项

Question

我有一个由 CMS 生成的导航列表。 cms 不允许在 nav 组件中插入额外的 html，除非向每个元素添加一个类。我想要的最终产品是通过 font Awesome 在每个导航项旁边附加一个图标。每个导航项目都有自己独特的图标和独特的类别。我已经能够使用 jquery 单独附加每个，但是有没有更干净的方法来实现这一点。

.html

<ul class="nav navbar-nav">
    <li class="homeNav"><a href="#">Home</a></li>
    <li class="aboutNav"><a href="#about">About</a></li>
    <li class="objNav"><a href="#objective">Objective</a></li>
    ...
    ...
    ...
</ul>

.jquery 我正在使用

$('.homeNav').children().empty().append('<i class="fa fa-home"></i> Home');

我应该为每个项目进行 jquery 调用吗？

Answer 1

您可以创建一个映射 className 的对象到图标类，例如:

var icons = {
  'homeNav': 'fa-home',
  'aboutNav': 'fa-about',
  'objNav' : 'fa-objective'
};

然后设置每个navbar的html <li> :

$('.nav.navbar-nav li').html(function(i, text) {
  return '<i class="fa ' + icons[this.className] + '">' + $(this).text();
});

您可能需要在其中添加一些检查以确保 icons[this.className]存在，但这应该为您指明正确的方向。

Here's a fiddle

编辑

如果您需要保留 anchor :

$('.nav.navbar-nav li').html(function(i, text) {
  return $('a', this).prepend('<i class="fa ' + icons[this.className] + '">');
});