Question

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

如果我能用CSS做到这一点，我会喜欢它 - 不管有什么用。我一直在尝试使用：在你介意之前。

这就是它的样子......对于我使用的youtube图标：

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

字体显示为“youtube”并将其设置为youtube符号。如果我想要一个圆形图标我会用：

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

我正在为一个主题制作选项，我希望社交图标样式为“常规，圆形，圆形”，并且在选择时在youtube之前插入“圆形”或“圆形”在<span>标记中。希望我有意义。

所以这是设置。

我有HTML代码<span class="social"> youtube </span>
我有JS代码将社交范围导入DIV：$('span.socialarea').appendTo('#socialcontainer');
我想在html代码中youtube之前插入一个单词。
我尝试过使用以下某些方法： $('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");
  });
});

Answer 2

您可以使用jQuery prepend()或prependTo()将内容添加到范围的前面吗？类似的东西：

$('span.socialarea').prepend($("<p>Some new tag</p>"));

或者：

$("<p>Some new tag</p>").prependTo($('span.socialarea'));

在内容</span>之前将文本插入<span>标记

2 个答案: