Change link text without id or class

Asked

Viewed 198 times

1

I need to change the text of the link, but this link has no identifier to do it quickly. I know almost nothing about Js, but I believe it is possible to do this by accessing the TD and then the link. 

<td class="corpo-nome">
       <a href="/rota/rota1">
         guilherme
       </a>
    </td>

That’s the result I want:

<td class="corpo-nome">
           <a href="/rota/rota1">
             MEU NOVO TEXTO
           </a>
</td>
javascript jquery html5
  • 1

    It would not be the case to use a $("a[href='<your link>']"). text('your text');?

  • You want to take the name guilherme that is there and then put another name in place only with CSS is it? Or you want to change the value of href of the link?

  • I have several links on the same page, didn’t work no :/

  • With css? would be with js, right? I need to change the same name. What is the link description.

  • 2

    Gustavo da para fazer com CSS tb, but the most indicated for semantic and accessibility issues would be with JS even, but only to remove the name completely, because only with CSS you can "hide" the name and put gold. You can’t really delete the screen name only with CSS, with CSS you can hide it and show only the new name. If you’re interested I can make an example for you

  • Yes, I have interest! please rsrs

  • @Gustavo could explain his doubt better, that maybe we understood something else...

  • I edited there @Felipeavelar

Show 3 more comments

3 answers

3


If you want to change text via Javascript, follow an example in Jquery

$(document).on('ready', function(){
  let novoTexto = "MEU NOVO TEXTO";
  $("td[class='corpo-nome'] a:first")
          .text(novoTexto)
          .attr('title',novoTexto);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="corpo-nome">
  <a href="/rota/rota1" title="guilherme">guilherme</a>
</td>
</tr>

  • It worked here, thank you very much. However, I noticed a strange thing, there is a title="Uilherme" property in <a>. I’ve never seen this... but this attribute is working like the alt="aa" attribute of the images. There when I pass the mouse on top, keeps appearing "Uilherme". It has how to change this tbm, will be?

  • @Gustavo then change it too, see my edition

  • Oops, vlw :) If it’s not too much to ask, I think it’s similar. Maybe it’s worth editing the question. I have a <a> link, but this one has id. And this link appears twice, with the same id. How do I change the text of the two links? I did with Document.getElementById("send"). innerHTML = "Send items to cart"; and only changes the first link. Thanks a lot

  • Then I think it’s another question... but first, you should never write two elements with the same id in the document

  • I know that, but it is the code that I receive from a platform. Then I had to duplicate this button, but it has class tbm. It has to change from the two?

3

See an option with CSS, but I make it clear that it is not very semantic, because even with 0 font a screen reader can have access to this text...

The technique consists of "delete" the text inside the link by placing the size of the font as 0, but you use a pseudo-element ::after on the link and using the property content:""; you put the new text.

Note that only the element that the attribute href = /rota/rota1 will receive the new text

[href="/rota/rota1"] {
    font-size: 0;
    color:red; /* cor de texto que o filho ::after vai herdar */
}
[href="/rota/rota1"]::after {
    content: " MEU TEXTO NOVO";
    font-size: 16px !important;
}
<td class="corpo-nome">
    <a href="/rota/rota1">
        guilherme
    </a>
</td>
<td class="corpo-nome">
    <a href="/rota/rota2">
        João
    </a>
</td>

If you want only the link inside the <td> classy .corpo-nome has the text changed just put the css this way

.corpo-nome a{
    font-size: 0;
    color:red;
}
.corpo-nome a::after {
    content: " MEU TEXTO NOVO";
    font-size: 16px !important;
}
<table>
    <tr>
        <td class="corpo-nome">
            <a href="/rota/rota1">
                guilherme
            </a>
        </td>
    </tr>
</table>

Keep in mind that: the user may not even see the text we hide with font-size: 0, but the Google Bot will definitely read this content... Will solve so you see with your eyes, but for the crawlers and screen readers the text will remain accessible...

2

Gustavo you can do this in several ways, through jquery selectors

$(function() {
  $('a:eq(0)').text('fulano');         // pega a tag 0 do documento
  $('a:eq(1)').text('ciclano');        // pega a tag 1 do documento
  $('a:eq(2)').text('beltrano');       // pega a tag 2 do documento
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td class="corpo-nome">
  <a href="/rota/rota1">
    guilherme
  </a>
</td>
<td class="corpo-nome">
  <a href="/rota/rota2">
    joão
  </a>
</td>
<td class="corpo-nome">
  <a href="/rota/rota3">
    carlos
  </a>
</td>

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.