Insérer du Texte dans <span> balises avant le contenu

J'ai une question concernant jQuery. J'aimerais insérer un mot avant le contenu dans une balise. La raison d'être, je suis en utilisant les icônes sociales et j'aimerais que deux mots à pouvoir être inséré avant la durée de changer la variation. Ici est la police que j'utilise: http://drinchev.github.io/monosocialiconsfont/

Si je peux le faire à l'aide de CSS, je l'aimerais - ce qui fonctionne. J'ai essayé d'utiliser :avant de vous l'esprit.

Voici à quoi il ressemble... pour une icône youtube j'avais utilisation: 

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

La police lit "youtube" et en fait la youtube symbole. SI je voulais une icône ronde j'avais utilisation: 

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

Je fais les options de thème, et j'aimerais que les Icônes Sociales de style pour être "régulier, arrondi, rond" et lors de la sélection ont "arrondi" ou "cercle" pour être inséré avant le youtube dans le <span> balises. J'espère que je suis en train de sens.

Donc voici la configuration.

  1. J'ai du code HTML <span class="social"> youtube </span>
  2. J'ai JS code de l'importation de la social plage dans un DIV: $('span.socialarea').appendTo('#socialcontainer');
  3. Je veux un mot inséré avant youtube dans le code html.
  4. J'ai essayé d'utiliser certains des éléments suivants:
    $('span.socialarea').add('rounded');
    et
    $('span.socialarea').text('rounded');
    et
    $('span.socialarea').before('rounded');
    Le plus tard semble le meilleur travail, mais a ajouté ça à l'extérieur de la durée de pas à l'intérieur.

L'espoir qui fait sens!
Version courte: ajouter un mot avant que le contenu dans une balise span.

  • Voir ma mise à jour avec la démo
InformationsquelleAutor Airman | 2013-06-11
  1. 5

    ajouter

    Démo

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

    est celui que vous cherchez peut-être.
    Ou avec appendTo:

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

    Il faudra cependant créer deux chaînes distinctes dans le navigateur google Chrome que j'utilise pour tester, vous POUVEZ donc en ce lieu

    Démo

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

    Pour plus de celui que vous avez besoin each

    Démo

    $(function() {
  $('span.socialarea').each(function() {
    var text = $(this).text();  
    $(this).text('circle'+text).appendTo("#socialcontainer");
  });
});
    • Doux, il le fait. Cependant, un problème est-il l'habitude de combiner les deux textes. Ils apparaissent au-dessus de chaque autre à la place d'un mot. De toute façon possible de corriger cela ou?
    • Voici ce que je veux dire, la police est particulier: d.pr/i/3N6s si il existe un moyen de faire lire de cette façon, ce serait génial
    • le CSS utilisé pour lire "youtube" et d'en faire l'icône est: webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased;
    • Pouvez-vous mettre à jour mon jouer avec le CSS ?
    • Merci, encore une question, c'est dupliquée maintenant, voici le code que j'utilise: <span class="socialarea">youtube</span> <span class="socialarea">aboutme</span>, et une image: d.pr/i/O0dy
    • Voir mise à jour. Eu à prendre un rapide petit déjeuner 🙂

    InformationsquelleAutor mplungjan
  2. 1

    Pourriez-vous utiliser le jQuery prepend() ou prependTo() d'ajouter votre contenu à l'avant de la plage? Quelque chose comme:

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

    Ou:

    $("<p>Some new tag</p>").prependTo($('span.socialarea'));
    • Est-ce que le code devrait ressembler? $(document).ready(function () { $('span.socialarea').appendTo('#socialcontainer'); $("arrondi").prependTo($('span.socialarea')); });
    InformationsquelleAutor CodeChimp