附加具有不同查询的列表项

Question

我有一个由 CMS 生成的导航列表。除了为每个元素添加一个类外，cms 不允许在导航组件中插入额外的 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>的html：

$('.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 遍历each li 并像这样添加子链接到里面

  $('.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”的背景位置。