0

Quero alterar um texto que aparece antes de um span com JQuery, este texto será alterado quando algum usuário mudar o nome de uma pasta.

<li>
  <a href="#">
     Pasta 1
     <span class="tag tag-pill tag-danger" id="spanPasta1">0</span>
  </a>
</li>

Quando altero usando o código abaixo, o span é apagado.

$("#spanPasta1").closest('a').text('pasta 2')

Quero mudar o texto, sem ter que mudar todo o código CSS e tirar o span de dentro do a href.

1 Resposta 1

2

Pode usar o método contents() que retorna apenas os nós de texto. Como o texto é o primeiro nó do <a>, você usa first().

Exemplo:

$("#spanPasta1")
.closest("a")
.contents()
.first()[0]
.textContent = "pasta 2";
/* apenas para ilustrar*/
span{
   display: block;
   background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">
     Pasta 1
     <span class="tag tag-pill tag-danger" id="spanPasta1">0</span>
  </a>
</li>


Uma outra forma é usando detach():

var span = $("#spanPasta1"), // seleciono o SPAN
    span_a = span.closest("a"); // seleciono o A
    
span = span.detach(); // retiro o SPAN e "reservo"

span_a
.text('pasta 2')
.append(span); // altero o texto do A e reintroduzo o SPAN no A
/* apenas para ilustrar*/
span{
   display: block;
   background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">
     Pasta 1
     <span class="tag tag-pill tag-danger" id="spanPasta1">0</span>
  </a>
</li>

2
  • 1
    Esses dois exemplos eu não conhecia, estava tentando achar uma solução.
    – NoobSaibot
    Commented 27/03/2018 às 8:17
  • A solução $("#spanPasta1").closest("a").contents().first()[0].textContent = "pasta 2"; functionou perfeitamente :)
    – RRV
    Commented 27/03/2018 às 16:39

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 .