1

Preciso mudar o texto do link, porem esse link não possui nenhum identificador para fazer isso de forma rápida. Não sei quase nada de Js, mas creio que é possível fazer isso acessando a TD e depois o link.

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

Esse é o resultado que quero:

<td class="corpo-nome">
           <a href="/rota/rota1">
             MEU NOVO TEXTO
           </a>
</td>
8
  • 1
    Não seria o caso de usar um $("a[href='<seu link>']").text('seu texto');? Commented 8/11/2018 às 18:22
  • Vc que tirar o nome guilherme que está lá e depois colocar outro nome no lugar só com CSS é isso? Ou vc quer trocar o valor do href do link?
    – hugocsl
    Commented 8/11/2018 às 18:26
  • Tenho vários links na mesma página, não funcionou não :/
    – Gustavo
    Commented 8/11/2018 às 18:27
  • Com css? seria com js, não? Eu preciso mudar o nome mesmo. Que é a descrição do link.
    – Gustavo
    Commented 8/11/2018 às 18:27
  • 2
    Gustavo da para fazer com CSS tb, mas o mais indicado por questões semânticas e de acessibilidade seria com JS mesmo, mas apenas para remover o nome completamente, pois só com CSS vc consegue "esconder" o nome e colocar ouro. Não da para realmente apagar o nome da tela só com CSS, com CSS vc consegue esconde-lo e mostra somente o nome novo. Se te interessar posso fazer um exemplo pra ti
    – hugocsl
    Commented 8/11/2018 às 18:30

3 Respostas 3

3

Se você quer mudar o texto via JavaScript, segue um exemplo em 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>

5
  • Deu certo aqui, muito obrigado. Porém, notei uma coisa estranha, existe uma propriedade title="guilherme" no <a>. Nunca vi isso... mas esse atributo está funcionando como se fosse o atributo alt="aa" das imagens. Ai quando passo o mouse em cima, continua aparecendo "guilherme". Tem como trocar isso tbm, será?
    – Gustavo
    Commented 8/11/2018 às 19:18
  • @Gustavo então altere ele também, veja a minha edição Commented 8/11/2018 às 19:27
  • Opa, vlw :) Se não for pedir muito, acho que é semelhante. Talvez compense eu editar a pergunta. Tenho um link <a>, porem esse tem id. E esse link aparece duas vezes, com o mesmo id. Como faço para alterar o texto dos dois links? eu fiz com document.getElementById("send").innerHTML = "Enviar itens para o carrinho"; e só altera o do primeiro link. Desde já muito obrigado
    – Gustavo
    Commented 8/11/2018 às 19:33
  • Aí eu acho que já é outra pergunta... mas primeiro, você nunca não deve escrever dois elementos com o mesmo Id no documento Commented 8/11/2018 às 19:36
  • Sei disso, mas é que é o código que recebo de uma plataforma. Ai tive que duplicar esse botão, porem ele tem class tbm. Tem como alterar dos dois?
    – Gustavo
    Commented 8/11/2018 às 19:39
3

Veja uma opção com CSS, mas deixo claro que não é muito semântico, pois mesmo com fonte 0 um leitor de tela pode ter acesso a esse texto...

A técnica consiste em "apagar" o texto dentro do link colocando o tamanho da font como 0, porém vc usa um pseudo-elemento ::after no link e usando a propriedade content:""; vc coloca o texto novo.

Repare que apenas o elemento que o atributo href = /rota/rota1 vai receber o texto novo

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


Se queiser que apenas o link dentro da <td> com classe .corpo-nome tenha o texto alterado basta colocar o css dessa forma

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


Tenha em mente que: o usuário pode até não ver o texto que escondemos com font-size: 0, mas o Bot do Google com certeza vai ler esse conteúdo... Vai resolver pra que vê com os olhos, mas para os crawlers e leitores de tela o texto vai continuar acessível...

2

Gustavo você pode fazer isto de diversas maneiras, através de seletores jquery

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .