Question

我有CMS生成的导航列表。除了向每个元素添加一个类之外，cms不允许在nav组件中插入其他html。我想要的最终产品是通过字体真棒附加每个导航项旁边的图标。每个导航项都有自己独特的图标和唯一的类。我已经能够使用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 <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

修改

如果你需要保留锚点：

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

Answer 2

创建要添加的所有图像的对象

 var images = {
        homeNav: '<i class="fa fa-home"></i>',
        aboutNav: '<i class="fa fa-about"></i>',
    };

然后使用jquery逐个迭代each li并将child添加到内部链接

  $('.navbar-nav li').each(function () {
        var cl = $(this).attr('class');
        $(this).find('a').append(images[cl]);
    });

如果您想将其附加到li本身，请使用$(this).append(images[cl]);

如果您要删除链接但保留其文字并添加元素，请使用此

$('.navbar-nav li').each(function () {
     var elm = $(this);
     var cl = elm.attr('class');
     elm.html(images[cl] + elm.find('a').html());
});

<强> Demo

Answer 3

我认为最干净的方法是使用每个“li”的类，并通过CSS插入图标，而不是添加jquery行来附加元素。您可以使用CSS图像精灵并更改每个“li”的背景位置。

使用不同的查询附加列表项

3 个答案:

Here's a fiddle

修改