Javascript 使用jquery操作dom对象

我使用的是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>');
});

$（'.socialMediaLinks a'）。每个（函数（）{
$（this.prepend（“”）；
});

这是回报

<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>

最好的做法是什么。第二，我应该将其放在document ready（文档准备就绪）或其他内容上吗？

您可以使用）替换每个元素中已知的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>';
});

$（'.socialMediaLinks a'）.html（函数（i，html）{
var mediaclass='fa-'+$.trim（html）.toLowerCase（）；
返回“”；
});

---

Fiddle:

用于删除facebook锚文本。如何获取facebook锚文本，将其转换为图标元素上的类。所以facebook在第二个图标元素上变成了fa facebook的一个类别。你希望这个类别是什么？只是

facebook

？在span上，我想是吧？

上的fa facebook。然而，如果锚文本是twitter，那么它必须是fatwitter等。效果很好。只是从来没有想过使用变量。非常感谢。我被困在这上面大约一个小时了。我会记下答案。谢谢