www.webdeveloper.com
Results 1 to 5 of 5

Thread: Change link text for each link a list

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    3

    Change link text for each link a list

    I have an automatically generated link from a cms that outputs
    Code:
    <a href="85858585858_file_name.pdf">85858585858_file_name.pdf</a>
    I need to rename the link to something like "File name", instead of the one that it generates. I have a field that I can populate which I can use to replace the text. I have been able to do this with Jquery, but the problem is that I have many paragraphs (all of the same class) that each contain this link. The script changes the text, but it takes the first instance of my replacement value, and applies that to every paragraph. I cannot get it to work on each instance.

    What I need is to have the script that will take each instance of the link, and replace the text with the text locate in the span directly previous to it.

    I attempted to use (this) but I had no luck as I am not aware of how to traverse the DOM effectively. I would be okay to add the javascript directly in the output (as shown below). I think I'm making it more complicated than it needs to be.

    The html at this point looks like this...

    {tag_file_type} is where I am adding from a dropdown a class of pdf, txt, etc.
    {tag_name} is the name I want to use as the files name
    {tag file} is the CMS generated link that names the

    HTML Code:
    <p class="literature-container">
    	<span class="{tag_file_type}"></span>
    	<span class="tag_name">{tag_name}</span>
    	<span class="tag_file">{tag_file}</span>
    </p>
    Any help would be greatly appreciated.

    Cheers,

  2. #2
    Join Date
    Nov 2010
    Posts
    1,083
    ca you gicve us a real example of a couple of sections of the generated html that you would like to change. I imagine that it's something like this:

    Code:
    <p class="literature-container">
    	<span class="pdf">pdf</span>
    	<span class="file1">file1</span>
    	<span class="85858585858_file_name.pdf"><a href="85858585858_file_name.pdf">85858585858_file_name.pdf</a></span>
    </p>
    <p class="literature-container">
    	<span class="doc">doc</span>
    	<span class="file2">file2</span>
    	<span class="555555555_file_name.doc"><a href="555555555_file_name.doc">555555555_file_name.doc</a></span>
    </p>
    is that close?

  3. #3
    Join Date
    May 2012
    Posts
    3
    Hi... here is an example.

    HTML Code:
    <p class="literature-container">
    	<span class="pdf"></span>
    	<span class="tag_name"><a href="/example-document-three">Example document three</a></span>
    	<span class="tag_file"><a href="/1002844_209191_test_three.pdf" target="_blank">1002844_209191_test_three.pdf</a></span>
    </p>

  4. #4
    Join Date
    Nov 2010
    Posts
    1,083
    assuming that I understand you correctly and that you only want to change the text for the links inside the spans with class "tag-file"
    Code:
    <script type="text/javascript">
    var links=document.links
    for (var a = 0; a < links.length; a++) {
    if (links[a].parentNode.className=="tag_file"){
    links[a].innerHTML=links[a].parentNode.previousElementSibling.innerHTML
    	}
    }
    </script>

  5. #5
    Join Date
    May 2012
    Posts
    3

    Not quite.

    Thanks for your help xelawho...

    That doesn't seem to work though. I don't get any errors but I don't get it working either.

    Do you know why?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles