Convert <li> text into a clickable link

Question

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

Answer 1

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.com/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> 

Answer 2

You can use click since you are using jquery

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

https://api.jquery.com/click/

Answer 3

Consider this:

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

 <script src="https://ajax.googleapis.com/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.com/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> 

Answer 4

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

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

Answer 5

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

Answer 6

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.net/6cjex8b2/