I've got a scenario where (I won't bore you with the details) I need to convert the text of a series of li's into clickable links (all going to the same destination URL). For instance:

<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>

I'd like for the countries to be converted into clickable links.

Using:

$( ".link" ).each(function() {
    $( this ).css( "color", "red" );
});

I can loop through the li's (although ideally I'd like to be able to 'target' the UL and then it's children removing the need for the class="link"...but that's another matter!) and in this instance simply change the colour of the text but I don't know how to change the text into a link.

Any chance someone could give me some pointers please?

Thanks, craig

I've got a scenario where (I won't bore you with the details) I need to convert the text of a series of li's into clickable links (all going to the same destination URL). For instance:

<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>

I'd like for the countries to be converted into clickable links.

Using:

$( ".link" ).each(function() {
    $( this ).css( "color", "red" );
});

I can loop through the li's (although ideally I'd like to be able to 'target' the UL and then it's children removing the need for the class="link"...but that's another matter!) and in this instance simply change the colour of the text but I don't know how to change the text into a link.

Any chance someone could give me some pointers please?

Thanks, craig

• javascript
• jquery
• html

• What is it you want each item to link to? You'll need soemthing there? – Paddy Commented Aug 20, 2015 at 15:58
• why don't you just wrap your text with an <a> tag? that way you will only need to deal with css ... – Edward Commented Aug 20, 2015 at 15:59
• there's a set of circumstances when I just want the text to stay as text but when a logged in user hits the page I want to convert the text in <a> (they all go to the same place) – SxChoc Commented Aug 20, 2015 at 16:00
• As a side note, you can call .css without the .each. It'll still apply it to every element. – Stryner Commented Aug 20, 2015 at 16:02
• i'm thinking that i need to loop through them to format each one one ie. keep the country name – SxChoc Commented Aug 20, 2015 at 16:03

6 Answers 6

You can use html() to write the inner anchor elements without each() using a callback

$('.link').html(function() {
  return '<a href="url">' + $(this).text() + '</a>';
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
  <li class="link">Australia</li>
  <li class="link">Fiji</li>
  <li class="link">Oman</li>
  <li class="link">Venezuela</li>
</ul>

You can use click since you are using jquery

$( ".link" ).click(function(){
 //do something here
alert('clicked');
});

https://api.jquery./click/

Consider this:

$( ".list-inline li" ).each(function() {
    $( this ).css( "color", "red" ).html('<a href="#'+$(this).text()+'">'+$(this).text()+'</a>');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>

But maybe you do not want real links, but just clickable <li>s?

$('.list-inline').on('click', 'li', function(event) {
  alert("Go to link");
})
.find('li').css({cursor:'pointer'});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
  <li class="link">Australia</li>
  <li class="link">Fiji</li>
  <li class="link">Oman</li>
  <li class="link">Venezuela</li>
</ul>

You can use callback function of .html() method:

$( ".link" ).html(function(i , oldhtml) {
  return "<a href='someref"+oldhtml+"'>"+oldhtml+"</a>"
});

You can use the 'wrapInner' function to do this:

$("ul.list-inline li").wrapInner(function() {
    return "<a href='somepage.html'></a>";
});

Although if you have access to the source to change the classes, not sure why you don't just code the links in place...

Is this what you're looking for?

<ul class="list-inline">
    <li>Australia</li>
    <li>Fiji</li>
    <li>Oman</li>
    <li>Venezuela</li>
</ul>

$( ".list-inline li" ).each(function() {
    $( this ).css( "color", "red" );
    var country = $(this).text();
    $(this).html('<a href="yourlink">'+country+'</a>');
});

Demo: http://jsfiddle/6cjex8b2/