CODEWITHSUNDEEP
javascriptjqueryhtml
SxChoc
SxChoc

Reputation: 619

Convert <li> text into a clickable link

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

Upvotes: 0

Views: 1745

Answers (6)

Ash
Ash

Reputation: 2108

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/

Upvotes: 0

Paddy
Paddy

Reputation: 33857

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

Upvotes: 0

AmmarCSE
AmmarCSE

Reputation: 30557

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>

Upvotes: 5

fboes
fboes

Reputation: 2239

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>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

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

Upvotes: 0

Stephen King
Stephen King

Reputation: 836

You can use click since you are using jquery

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

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

Upvotes: 3

Related Questions