CODEWITHSUNDEEP
javascriptjquery
MShack
MShack

Reputation: 652

Replace link and text , if text contains :

I need to replace a few links if they contain certain text , the URLS of each link are change from server to server on the hosts site , so i can only replace using text. In the following html , i need to find the ul#hsubmenuitems that contain "Rosters" and "Forums" and replace them with 2 new links and URL paths

<div id="hsubmenu">
    <ul id="hsubmenuitems">
        <li></li>
        <li></li>
        <li><a href="#">Scoreboard</a>
        </li>
        <li><a href="#">Rosters</a>
        </li>
        <li><a href="#">Forums</a>
        </li>
    </ul>
</div>

Change to :

<div id="hsubmenu">
    <ul id="hsubmenuitems">
        <li></li>
        <li></li>
        <li><a href="#">Scoreboard</a>
        </li>
        <li><a href="NEW URL 1">NEW LINK 1</a>
        </li>
        <li><a href="NEW URL 2">NEW LINK 2</a>
        </li>
    </ul>
</div>

I am currently using CSS to remove the link i don't want , and then using jQuery to append a new link , but i know there is a more effiecent way , i am just not fluent with jQuery to figure it out.

$("#hsubmenuitems").append('<li><a href="NEW URL 1">NEW LINK 1</a></li>');

Upvotes: 1

Views: 2590

Answers (4)

Huangism
Huangism

Reputation: 16438

Using :contain() you can do:

$("#hsubmenuitems a:contains('Rosters')").text('new link').attr('href', 'new href');
$("#hsubmenuitems a:contains('Forum')").text('new link').attr('href', 'new href');

For more ifo, http://api.jquery.com/contains-selector/

Here is a demo http://jsfiddle.net/cepdmfLo/

Remember to put the code in document ready.

To update the target attribute, it is very similar to the href edition. The following example sets the target attribute to _blank

$("element").attr('target', '_blank');

please see http://api.jquery.com/attr/ for more info

You can chain the entire thing

$("#hsubmenuitems a:contains('Rosters')").text('new link').attr('href', 'new href').attr('target', '_blank');

http://jsfiddle.net/cepdmfLo/2/ the 'Roster' new link has the target

Upvotes: 4

Balachandran
Balachandran

Reputation: 9637

Use replaceWith() in jquery to replace the certain link

$('ul#hsubmenuitems li a[href=#]:contains(Rosters)').replaceWith("<a href=NEW URL 1>NEW LINK 1</a>")

$('ul#hsubmenuitems li a[href=#]:contains(Forums)').replaceWith("<a href=NEW URL 2>NEW LINK 2</a>");

DEMO

Upvotes: 0

glycerin
glycerin

Reputation: 91

Here is an example that will find links with the specified text and replace them with new text and href. Hope this helps: JsFiddle

$(document).ready(function(){

var searchTerms = ["Rosters","Forums"];

$("a").each(function(index, element){       
    var linkText = $(this).text();        
    var inArray = $.inArray(linkText, searchTerms);        
    if (inArray !== -1)
    {
        $(this).attr("href", "http://www.google.com");
        $(this).text("Google " + index);
    }      
});
});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$(function(){
   $('ul#hsubmenuitems li').each(function(){
       var text = $(this).text();
       if(text.indexOf('Rosters')!=-1)
       {
         $(this).text('NEW LINK 1');
         $(this).attr('href','NEW URL 1');
       }
       else if(text.indexOf('Forums')!=-1)
       {
         $(this).text('NEW LINK 2');
         $(this).attr('href','NEW URL 2');
       }
   });
});

Demo

Upvotes: 0

Related Questions