jquery - 在内容之前的 <span> 标签中插入文本

Question

我有一个关于 jQuery 的问题。我想在标签内容前插入一个词。原因是，我正在使用社交图标，我希望能够在实际跨度之前插入两个词以更改变体。这是我使用的字体:http://drinchev.github.io/monosocialiconsfont/

如果我可以使用 CSS 做到这一点，我会喜欢它 - 任何有用的东西。我试过使用 :before mind you.

这是它的样子...对于我使用的 YouTube 图标:

<span class="social">youtube</span>

字体显示为“youtube”，并使其成为 youtube 符号。如果我想要一个圆形图标，我会使用:

<span class="social">roundedyoutube</span>

我正在为一个主题做出选择，我希望社交图标样式为“常规、圆形、圆形”，并且在选择时在 youtube 之前插入“圆形”或“圆形”在<span>标签。希望我是有道理的。

这是设置。

1. 我有 HTML 代码 <span class="social"> youtube </span>
2. 我有 JS 代码将社交跨度导入 DIV:$('span.socialarea').appendTo('#socialcontainer');
3. 我想在 youtube 之前插入一个词在html代码中。
4. 我试过使用以下一些方法: $('span.socialarea').add('rounded'); 和 $('span.socialarea').text('rounded'); 和 $('span.socialarea').before('rounded'); 后者似乎效果最好，但将其添加到跨度之外而不是内部。

希望这是有道理的! 简短版本:在 span 标签的内容前添加一个词。

Answer 1

prepend

Live Demo

$(function() {
  $('span.socialarea').prepend('rounded');
});

是您可能正在寻找的那个。 或者使用 appendTo:

$(function() {
  $('span.socialarea').prepend('rounded')
    .appendTo("#socialcontainer");
});

然而，它会在我用来测试的 Chrome 浏览器中创建两个单独的字符串，因此您可能需要这个

Live Demo

$(function() {
  var text = $('span.socialarea').text();
  $('span.socialarea').text('rounded'+text)
    .appendTo("#socialcontainer");
});

如果不止一个，你需要 each

Live Demo

$(function() {
  $('span.socialarea').each(function() {
    var text = $(this).text();  
    $(this).text('circle'+text).appendTo("#socialcontainer");
  });
});