Question

我正在使用CMS，它只使用基于文本的锚点构建导航，因此其当前输出为

<li class="socialLinks"><a href="http://www.facebook.com">facebook</a></li>

我需要操纵这些链接以使用字体真棒。基本上我想删除锚文本，但同时使用它来让一个类出现在图标元素上。最终的列表元素应如下所示。因此，请将“facebook”的锚文本添加到第二个图标元素中作为fa-facebook类。

<li class="socialLinks"><a href="http://www.facebook.com"><span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> </span></a></li>

我试图使用.prepend来查找.socialLinks元素并使用jQuery预先添加锚文本。这工作，我只是无法弄清楚如何现在采取锚文本并将其转换为fa-facebook并将其添加到类.fa-stack-1x的图标。然后完全删除锚文本。

$('.socialMediaLinks a').each(function() {
    $(this).prepend('<span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-stack-1x fa-inverse"></i> </span>');
});

返回

<li class="socialLinks"><a href="http://facebook.com" target="_blank"><span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-stack-1x fa-inverse"></i> </span>Facebook</a></li>

什么是最好的行动方案。其次，我应该把它放在文件准备好还是别的什么？

Answer 1

您可以使用this property of .html()）替换html，了解每个元素中的上一个html：

$('.socialMediaLinks a').html(function(i, html) {
      var mediaclass = 'fa-' + $.trim(html).toLowerCase();
      return '<span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-stack-1x ' + mediaclass + '  fa-inverse"></i> </span>';
});

小提琴：http://jsfiddle.net/RBzwk/

使用jquery来操作dom对象

1 个答案: