jQuery - how to change text after "<i>" element?

Asked

Viewed 2,446 times

8

Follows code:

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

I’ve tried that way:

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

The result looks like this:

<div class="file-caption-name">
    <i class="glyphicon glyphicon-file kv-caption-icon">your new title</i>
    Alterar texto aqui
</div>
jquery html5

  • You want to move the text from div to the i?

  • 1

    No, just change the text "Change text here" to "your new title".

  • 1

    Do not change the preference of your favorite answer, but note that mine does not touch anything in your HTML. Abs!

2 answers

8


To change the text afterward and not the whole text of .file-caption-name. you can do two ways, add an inline span element:

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

Or you can take the <i> and detach using the detach() it and then remove the content and add again the <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>

6

UPDATED RESPONSE.

You can do a treatment to pick up only the TEXT inside the div with nodeType == 3 and make a replace with textContent eliminating whitespace before and after text with $.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>

  • 1

    This is not changing the text after the element, it is changing the whole content of the element.

  • 1

    @Guilhermenascimento Verdade. I have updated the answer.

Browser other questions tagged jquery html5

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