CODEWITHSUNDEEP
jqueryregexstringreplace
user2291964
user2291964

Reputation: 49

Jquery replace a string of html

This type of question has probably been asked before, but I cannot get the specific variation I need to work. Using jquery, I just need to have the output html automatically change when the page first loads, without user interaction.

So, I'm stuck with this html that I cannot modify:

<ul>
  <li><a href="A" class="fullProfile">View Full Profile</a></li>
  <li><a href="author" class="extLink">Laboratory Page</a></li>
</ul>

I need all of the above to change to just:

<a name="A" class="letter">A</a>

As you might guess, I'll need to ultimately repeat this 26 times (so I have anchor links for every letter), so something lite and efficient that I can easily repeat would be great.

A jsfiddle or similar would be ideal, showing what I need to put in the <head> of my document as I'm definitely not jquery proficient!

Thanks, Dar.

Upvotes: 0

Views: 396

Answers (4)

mplungjan
mplungjan

Reputation: 177885

Live Demo

$(function() {
    $(".fullProfile").each(function() {
      var href= $(this).attr("href");
      var link = $('<a name="'+href+'" class="letter">'+href+'</a>');
      $(this).closest("ul").replaceWith(link);
    });
});

UPDATE

Handling your other links to point at the new anchors:

Live Demo

$(function() {
  $(".fullProfile").each(function() {
    var href = $(this).attr("href");
    var link = $('<a name="'+href+'" class="letter">'+href+'</a>');
    $(this).closest("ul").replaceWith(link);
  });
  $(".cwyFellowName a").each(function() {
    var href = $(this).attr("href");
    if (href.length==1) $(this).attr("href","#"+href);
  });
});

UPDATE

Here we handle the rest of the links that do not have their own letter

 $(function() {
    $(".fullProfile").each(function() {
      var href = $(this).attr("href");
      var link = $('<a name="'+href+'" class="letter">'+href+'</a>');
      $(this).closest("ul").replaceWith(link);
    });
    $(".cwyFellowName a").each(function() {
      var href = $(this).attr("href");
      if (href.length==1) $(this).attr("href","#"+href);
      else if (href=="link") {
        var txt = $(this).text();
        if (txt.length==1) {
          $(this).attr("href","#"+txt);
          var nextDiv = $(this).parent().nextAll(".cwyFellowLinks:first");
          nextDiv.find("a").attr("name",txt).text(txt);
        }
      }    
   });
});

Upvotes: 1

netblognet
netblognet

Reputation: 2016

What about this?

http://jsfiddle.net/srU5w/3/

 $(document).ready(function(){
     $('ul').each(function(){         

     var letter = 'not found';

     $(this).find('.fullProfile').each(function(){
         letter = $(this).attr('href');
     });

     $(this).replaceWith('<a name="'+letter+'" class="letter">'+letter+'</a><br/>');
 });

});

Upvotes: -1

adeneo
adeneo

Reputation: 318192

target all .fullProfile links, get the href, as it seems like that should be the name of the anchor, and replace the closest wrapping UL with the new anchor :

$('.fullProfile').each(function() {
    var new_anchor = $('<a />', {name   : $(this).attr('href'), 
                                 'class':'letter',
                                 text   : $(this).attr('href')
                                });
    $(this).closest('ul').replaceWith(new_anchor);
});

Upvotes: 1

Eleazan
Eleazan

Reputation: 438

Something like... 

 $("ul a").each(function (){
    $(this).html($(this).attr('href'));

    $(this).attr('class', 'letter');
    $(this).attr('name', $(this).attr('href'));
    $(this).removeAttr('href');
});

http://jsfiddle.net/gf4Qh/1/

You can play with selector, and values :)

Upvotes: 0

Related Questions