0

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.

Improve this question
3
  • 4
    Set up the jsfiddle and people will be more likely to help you out Commented Jul 8, 2013 at 13:00
  • $('ul').html('new html'); perhaps? Edit: Might need to call parent before: $('ul').parent().html('new html');. Commented Jul 8, 2013 at 13:00
  • agree with reekogi, setup the scenario in JSFiddle with a good code example Commented Jul 8, 2013 at 13:01

4 Answers 4

Reset to default
1

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);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@mplungjan - no, only prop() or this.href does that, not attr() or getAttribute, so this works just like it is.
Got it. Thanks. Seems our solutions are very similar :) +1
I think I deserve a +1 now too. No?
@mplungjan - yes you do, +1 !
1

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);
        }
      }    
   });
});
Improve this answer

13 Comments

You realize that the reason you need to split and splice is because you're getting the href property, and not the attribute ?
I changed to prop, because I had the same issue with attr, must have missed something. Thanks
@mplungjan Thanks for your reply. I've added your code directly to my demo page here: ucd.ie/research/sandbox/conway/fellows/07.html I'm just going to note the issues in a moment...
You need to change <a href="A">A</a> to <a href="#A">A</a> for it to work - see jsfiddle.net/mplungjan/LxrMa for an example with your html
You might see on my page now that A,B,C & D anchor links are working only. Also the extra code I wish to remove is still visible.
|
0

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

Improve this answer

2 Comments

Wouldn't this just change both anchors and keep the unordered list ?
I need all of the above to change to just...
-1

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/>');
 });

});

Improve this answer

8 Comments

@mplungjan Ok, my fault. Just edited another time. Now it should be ok.
Now it is likely ALMOST working but with a needless find since you do not target the link with the information. However there are many other ULs in his page which also have links which are NOT author
@netblognet Thanks for your code. I have added it to my HEAD. Unfortunately, I now get this: www.ucd.ie/research/sandbox/conway/fellows/08.html
I should have explicitly stated that I cannot touch the body code. It's pulled from an RSS feed that I do not own. Thanks.
@user2291964 Please refresh this stackoverflow thread. I edited my snippet and you have used an old code from an old answer of mine.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.