8

Segue código:

<div class="file-caption-name">
    <i class="glyphicon glyphicon-file kv-caption-icon"></i>
    Alterar texto aqui
</div>

Já tentei dessa forma:

$('div.file-caption-name i').text('your new title');

O resultado fica assim:

<div class="file-caption-name">
    <i class="glyphicon glyphicon-file kv-caption-icon">your new title</i>
    Alterar texto aqui
</div>
3
  • Você quer mover o texto da div para o i? 4/10/2017 às 16:13
  • 1
    Não, apenas mudar o texto "Alterar texto aqui" para "your new title". 4/10/2017 às 16:14
  • 1
    Não mude a preferência da sua resposta favorita, mas note que a minha não mexe em nada no seu HTML. Abs!
    – Sam
    4/10/2017 às 17:45

2 Respostas 2

8

Para alterar o texto depois e não o texto todo do .file-caption-name. você pode fazer de duas maneiras, adicionar um elemento inline span:

$(document).on("click", "#trocar", function () {
    $(".file-caption-name > span").text("Olá, mundo!");
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="file-caption-name">
    <i class="glyphicon glyphicon-file kv-caption-icon"></i>
    <span>Alterar texto aqui</span>
</div>

<button id="trocar">Trocar</button>

Ou você pode pegar o <i> e desanexar usando o detach() ele e então remover o conteúdo e adicionar novamente o <i>:

$(document).on("click", "#trocar", function () {
    var icon = $(".file-caption-name i").detach();
    $(".file-caption-name").text("Foo, Bar!");
    icon.prependTo(".file-caption-name");
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="file-caption-name">
    <i class="glyphicon glyphicon-file kv-caption-icon"></i>
    Alterar texto aqui
</div>

<button id="trocar">Trocar</button>

2
  • 1
    Nice bro, resolveu aqui. 4/10/2017 às 17:12
  • 1
    @MatheusMiranda obrigado por aceitar!
    – Syzoth
    4/10/2017 às 17:14
6

RESPOSTA ATUALIZADA.

Você pode fazer um tratamento para pegar apenas o TEXTO dentro da div com nodeType == 3 e fazer um replace com textContent eliminando espaços em branco antes e depois do texto com $.trim():

 $('div.file-caption-name').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace($.trim($('div.file-caption-name').text()),'your new title');
});

$('div.file-caption-name').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace($.trim($('div.file-caption-name').text()),'your new title');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="file-caption-name">
    <i class="glyphicon glyphicon-file kv-caption-icon"></i>
    Alterar texto aqui
</div>

2
  • 1
    Isto não esta alterando o texto depois do elemento, ele esta alterando o conteúdo inteiro do elemento.
    – Syzoth
    4/10/2017 às 17:04
  • 1
    @GuilhermeNascimento Verdade. Já atualizei a resposta.
    – Sam
    4/10/2017 às 17:36

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 .