use jquery to manipulate dom objects

Question

I am using a CMS which builds navigation with text based anchors only so its current output is

<li class="socialLinks"><a href="http://www.facebook.com">facebook</a></li>

I need to manipulate these links to work with font awesome. Essentially I want to remove the anchor text but at the same time using it to have a class appear on an icon element. The final list elements should look like this. So take the anchor text of "facebook" and adding it to the second icon element as a class of 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>

I was attempting to use .prepend to find the .socialLinks a element and prepending the anchor text with jQuery like so. And this works, I just can't figure out how to now take the anchor text and convert it to fa-facebook and add it to the icon with class of .fa-stack-1x. And then remove the anchor text altogether.

$('.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>');
});

this returns

<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>

What is the best course of action. Secondly should I put this on document ready or something else?

megawac · Accepted Answer · 2013-11-16 22:03:00Z

1

You can make use of of this property of .html()) to replace html aware of the previous html in each element:

$('.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>';
});

Fiddle: http://jsfiddle.net/RBzwk/

edited Nov 16, 2013 at 22:03

answered Nov 16, 2013 at 21:51

megawac

11.4k6 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1881482 Over a year ago

That works to remove the facebook anchor text. How do I take facebook anchor text, convert it to a class on the icon element. So facebook becomes a class of fa-facebook on the second icon element

megawac Over a year ago

What would you like the class to be ? just facebook? And on the span I guess right?

user1881482 Over a year ago

fa-facebook on the <i class="fa fa-stack-1x fa-inverse">. However if the anchor text is twitter it would have to be fa-twitter etc.

user1881482 Over a year ago

Works great. Just never even thought to use a variable. Thanks alot. I had been stuck on this for about an hour. I will mark as answered. Thanks

Collectives™ on Stack Overflow

use jquery to manipulate dom objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related