使用 jQuery 操作 DOM 对象

use jquery to manipulate dom objects

本文关键字：对象 DOM 操作 jQuery 使用      更新时间：2023-09-26

我正在使用一个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>

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

你可以利用 .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/

相关文章：