Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Change href (with specific id) with JQuery

    Hi there

    I would like to create a JQuery function which would onload search for all links with id "inline" and change them.

    This is a example link:
    Code:
    <a id="inline" href="#ucBox0_ctl01out_lblid">Info</a>
    I know this can be partially done (ie. search for all href with id inline) by:
    Code:
    $(document).ready(function(){
    	$('#inline').attr('href', 'http://www.test.com');
    });
    But the complicated part im not sure about is I need to manipulate the href before changing it.

    So for example:

    ucBox0_ctl01out_lblid to ucBox0_ctl00
    ucBox0_ctl02out_lblid to ucBox0_ctl01
    ucBox0_ctl03out_lblid to ucBox0_ctl02
    etc...

    I was thinking to remove "out_lblid", then extract 01, minus 1 then append it back to the string...

    The end result I would like is for example:
    Code:
    <a id="inline" href="#ucBox0_ctl00">Info</a>
    Can this be done? Any help is really appreciated.
    Last edited by vorl; 09-04-2012 at 12:01 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    the first problem is that IDs should be unique. If they are not it will cause your code to get hokey, almost guaranteed

    If you want all your links to share an attribute you should give them a class instead.

    after that it should be easy enough with jQuery's .each() method

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    the first problem is that IDs should be unique. If they are not it will cause your code to get hokey, almost guaranteed

    If you want all your links to share an attribute you should give them a class instead.

    after that it should be easy enough with jQuery's .each() method
    Thanks for the reply.

    Unfortunately I cant change the id's and it has to be the same but I do appreciate the advice!

    Anyway, I dont think I was clear enough in my original post.

    So for example there will be three links on the page such as

    <a id="inline" href="#ucBox0_ctl01out_lblid">Info</a>
    <a id="inline" href="#ucBox0_ctl02out_lblid">Info</a>
    <a id="inline" href="#ucBox0_ctl03out_lblid">Info</a>

    Onload, I was hoping we could use jQuery to change the links to this

    <a id="inline" href="#ucBox0_ctl00">Info</a>
    <a id="inline" href="#ucBox0_ctl01">Info</a>
    <a id="inline" href="#ucBox0_ctl02">Info</a>

    I hope thats clearer but do let me know if im not

    Thanks!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,726
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    I’m not sure that what you’re trying to do is good practice but familiarize yourself with jQuery’s selectors (which are similar to or inspired from CSS selectors). Specifically you’re looking for the “contains” selector.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if your requirements are as simple as you make them sound, you could do something like this:
    Code:
    <script type="text/javascript">
      $(document).ready(function(){
      var count=0
    $('a').each(function(){
        if(this.id=="inline") {
    	this.href="ucBox0_ctl0"+count++
    			}  
    		});
    	});
    </script>

  • Users who have thanked xelawho for this post:

    vorl (09-04-2012)

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Hi xelawho

    Thanks for the reply!

    Apologies, I should have been more specific.

    Also, I dont know what I was looking at, but the way I want to modify the link is a little different (possibly easier):

    Here are 4 examples how the string needs to be manipulated:

    1. ucBox0_ctl00_ucOutBox0_0_0_lblid to ucBox0_ctl00_lblid
    2. ucBox1_ctl01_ucOutBox7_0_0_lblid to ucBox1_ctl01_lblid
    3. ucBox2_ctl02_ucInBox9_0_0_lblid to ucBox2_ctl02_lblid
    4. ucBox3_ctl00_ucInBox3_0_2_lblid to ucBox3_ctl00_lblid

    So basically I need to remove the characters between ucBox0_ctl00 and _lblid, I have made bold the characters that need removing.

    Please let me know if im not being clear.

    Thanks!

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    you could probably manipulate the href using string methods like this:
    Code:
    <script type="text/javascript">
      $(document).ready(function(){
    $('a[id="inline"]').each(function(){
    this.href=this.hash.substr(0).slice(0,13)+"lblid";
    		});
    	});
    </script>
    but it looks to me like a regex solution would be better (and I am hopeless at regex, so...)

  • Users who have thanked xelawho for this post:

    vorl (09-04-2012)

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Amazing, thank you xelawho!

    Works perfectly!

    Thanks again for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •