2

jQueryについて質問です。タグのコンテンツの前に単語を 1 つ挿入したいと思います。その理由は、ソーシャル アイコンを使用していて、実際のスパンの前に 2 つの単語を挿入してバリエーションを変更できるようにしたいからです。私が使用しているフォントは次のとおりです: http://drinchev.github.io/monosocialiconsfont/

CSS を使用してこれを行うことができれば、私はそれが大好きです。私は :before を使用してみました。

これがどのように見えるかです...私が使用するYouTubeアイコンの場合：

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

フォントは「youtube」を読み取り、youtube シンボルにします。丸いアイコンが必要な場合は、次を使用します。

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

テーマのオプションを作成しています。ソーシャル アイコンのスタイルを「通常、丸み、丸」にして、選択時にyoutubeタグの<span>前に「丸」または「円」を挿入したいと考えています。うまくいけば、私は理にかなっています。

それではセットアップです。

  1. HTMLコードがあります<span class="social"> youtube </span>
  2. ソーシャル スパンを DIV にインポートする JS コードがあります。$('span.socialarea').appendTo('#socialcontainer');
  3. youtubeHTMLコードの前に単語を挿入したい。
  4. 私は次のいくつかを使用してみました: $('span.socialarea').add('rounded'); と 後者が最もうまくいくよう$('span.socialarea').text('rounded'); に $('span.socialarea').before('rounded'); 見えましたが、内側ではなくスパンの外側に追加しました。

それが理にかなっていることを願っています！短いバージョン: span タグのコンテンツの前に単語を追加します。

4

2 に答える 2

5

先頭に追加

ライブデモ

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

あなたが探しているかもしれないものです。またはappendToで：

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

ただし、テストに使用する Chrome ブラウザーでは 2 つの別個の文字列が作成されるため、代わりにこれが必要になる場合があります。

ライブデモ

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

必要な複数の場合each

ライブデモ

$(function() {
  $('span.socialarea').each(function() {
    var text = $(this).text();  
    $(this).text('circle'+text).appendTo("#socialcontainer");
  });
});
于 2013-06-11T20:24:46.583 に答える
1

jQuery prepend()またはprependTo()を使用して、コンテンツをスパンの先頭に追加できますか? 何かのようなもの：

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

または：

$("<p>Some new tag</p>").prependTo($('span.socialarea'));
于 2013-06-11T20:26:44.903 に答える