のdiv内のテキストを変更するが、そのdivの内側に他の要素を削除しませ

Question

私はクラスとdiv要素のテキストを変更したい

<div class="registered-count-container"> 
    <div class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"): <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span></div> 
</div> 

の下に次のようになりますdivの持つ「登録をカウントインナー」うちは、「登録されたカウント・コンテナのdivの内側スパンを削除することが、私はそれはとのスパンを含む「登録-カウントインナー」クラス内のすべてを一掃この

$(eventPanel).find(".registered-count-inner").text("Interested"); 

のようにテキストを変更した場合とバッジクラス。 spanタグを削除せずにテキストを変更する方法はありますか？

Answer 1

は別のスパンでそのテキストを入れて、唯一のことを変更する：あなたはマークアップを変更せずにそれを行うことができます

$(eventPanel).find(".registered-count-inner").text("Interested"); 

Answer 2

：

<div class="registered-count-container"> 
    <div class=""> 
     <span class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"):</span> 
     <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span> 

    </div> 
</div> 

そして同じコード。 子ノード要素のにアクセスし、（マークアップで）最初のテキストノードのテキストを置き換えるためにjquery contents()を使用する - デモ下記参照：

$('.registered-count-inner').contents().get(0).nodeValue = 'new text here';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="registered-count-container"> 
 
    <div class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"): <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span></div> 
 
</div>

Answer 3

を交換しようとしているので、 div内にあるテキストノードを最初にフィルタリングして、そのノードの要素を変更することができます。

var eventPanel = ".registered-count-container" 
 

 
var textnode = $(eventPanel).find(".registered-count-inner").contents().filter(function() { 
 
    return this.nodeType === 3; 
 
}); 
 

 
textnode[0].textContent = "Interested"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="registered-count-container"> 
 
    <div class="registered-count-inner">Registered <span class="badge"> I am span</span> 
 
    </div> 
 
</div>

Answer 4

より柔軟なアプローチ

$(document).ready(function(){ 
 
    
 
    replaceDivContent('.registered-count-inner', 'Registered', 'Interested'); 
 
}); 
 

 
function replaceDivContent(identifier, from, to){ 
 

 
    var newContent = $(identifier).text().replace(from, to); 
 
    $(identifier).text(newContent); 
 
}

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

 
<div class="registered-count-inner">Registered: <span>Other Text Stuff</span></div>