ändern Text von Element, das andere Elemente enthält

Question

Ich habe Markup wie folgt aus:

<li data-id="1"> 
    <button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;"> 
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    random text 
    <input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again"> 
    </button> 
</li> 

ich den Text „random Text“ zu „etwas anderes“ ändern möchten.

Ich kann den Text-Knoten finden:

$li.find('button').first().contents().filter(function() { 
    return this.nodeType == 3; 
    }).text(); 

Aber wie kann ich den Text ändern? Wenn ich ein Argument an Text wie text('something else') weitergebe, ändert sich nichts.

Answer 1

Ich würde wahrscheinlich den Text in einem eigenen Container wie

<div id='changeableText'>Random Text</div>

setzen und dann einfach direkt Zugang mit

$('#changeableText').text('New text!');

dies zu erreichen.

Answer 2

Aktualisiert

Sie können wählen Sie einfach die text() der Taste und es ändern.

Hinweis: Dies funktioniert nicht, wenn mehr als ein nicht markierter Text vorhanden ist. Z.B.

<li data-id="1"> 
    <button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;"> 
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    random text 
    <input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again"> 
    another random text 
    </button> 
</li> 

Ansonsten ist sie ein Arbeits Demo:

var getNonMarkedUpText = $('button').text().replace(/^\s+|\s+$|\s+(?=\s)/g, ""); 
 
$('button').html($('button').html().replace(getNonMarkedUpText, 'something else'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li data-id="1"> 
 
    <button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;"> 
 
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
 
    random text 
 
    <input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again"> 
 
    </button> 
 
</li>

Answer 3

Try this:

<li data-id="1"> 
    <button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;"> 
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    <span id="txt1">random text</span> 
    <input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again"> 
    </button> 
</li> 

Auf diese Weise können Sie gehen:

document.getElementById("txt1").innerText = "txet modnar"; 

Oder

$("#txt1").text("tandom rext");