htmlの文字列を置き換える方法

Question

私のプロジェクトでは、ajaxでDBからhtmlコンテンツを取得します。そして、私は右の誰かのdivクラスのleftdを置き換える必要があります。私の唯一の判断条件は、ジョンの名前です。私はnameCstを設定した場合=ジョン・クラス= "rightd"

var nameCst="John"; 
$.ajax({ 
     dataType:'json', 
     type:"POST", 
     url:"get_ajax_csc.php", 
     data:{stNum:stNum}, 
     success:function(data) 
     { 
     var beforeReplace=data.stPrc; 
     //the div class of before nameCst John be replaced to rightd 
     //after repalce, 
     $('#timeTagDiv').html(afterReplace); 
     } 
    }); 

前のdivを設定する方法 "ジョン" は、前に、beforeReplaceの内容を置き換えます、afterReplaceの内容を交換した後

<div class="leftd"> 
    <label id="dlgRspTime">10:23:40</label> 
    &nbsp; 
    <label id="dlgCharge">Snow</label> 
    <label>&nbsp;acceptSheet</label> 
</div> 
<div class="leftd"> 
    <label id="dlgRspTime">10:23:55</label> 
    &nbsp; 
    <label id="dlgCharge">John</label> 
    <label>&nbsp;hangSheet</label> 
</div> 

を：

<div class="leftd"> 
    <label id="dlgRspTime">10:23:40</label> 
    &nbsp; 
    <label id="dlgCharge">Snow</label> 
    <label>&nbsp;acceptSheet</label> 
</div> 
<div class="rightd"> 
    <label id="dlgRspTime">10:23:55</label> 
    &nbsp; 
    <label id="dlgCharge">John</label> 
    <label>&nbsp;hangSheet</label> 
</div> 

誰が私に助けを与えることができますか？

Answer 1

最初に、私はあなたにすばやくお勧めします。異なる要素に同じ 'id'属性を持つべきではありません。 'id'属性の目的は、DOM内で一意になることです。

CHANGINGのCLASSあなたの質問に関するコンテンツ

を表示した後、一つの選択肢は、あなたがコンテンツを入れた後、あなたはDOMでそれを直接操作することができますので、inmediatlyクラスを変更することです。あなたはそれで作業することができた場合は、最初のあなたは...

$('#timeTagDiv').html(data.stPrc); 

を配置する必要があります...そして次の2つのオプションがあります：あなたは名前が一致するつもりはないことがわかっている場合

1. を別のラベル（部分文字列としても）で、contains（）を使うのが速い方法です。あなたは1とで（「ジョン・スミス」 '他のラベルで部分文字列と同じ名前を持つかのうである場合は、あなたのケースでは、あなたは...

   var nameCst='John'; 
   $('label:contains('+nameCst+')').parent().attr('class','rightd'); 
   

2. を選択し、1行に言及したクラスを置き換えることができますJohn Wick '）と一緒に行かなければなりません。フィルター（）を使用します。あなたの場合は...

   var nameCst='John'; 
   
   $("label").filter(function() { 
       return $(this).text() === nameCst; 
   }).parent().attr("class", "rightd"); 
   

あなたがこの順序で物事を可視化問題のいくつかの種類を持っている場合（そのような点滅か何かでコンテンツを移動する「醜い」）、ちょうど第一の容器を隠します内容を内部に置き、クラスを変更してからコンテナを表示します。あなたはコンテキストをロードする前にHTMLを変更する必要が何らかの理由で、あなたはこのように行くことができるならば、とにかくCONTENT

を表示する前に

CHANGINGのCLASS ...

var nameCst='John'; 

var $myHtml = $(data.stPrc); 

// Use contains() or filter() depending or your case. Here I use contains...   
$myHtml.find('label:contains('+nameCst+')').parent().attr('class','rightd'); 

$('div#timeTagDiv').html($myHtml); 

私は願っています助ける

Answer 2

あなたがjQuery

<div class="leftd"> 
    <label id="dlgRspTime">10:23:40</label> 
    &nbsp; 
    <label id="dlgCharge">Snow</label> 
    <label>&nbsp;acceptSheet</label> 
</div> 
<div class="leftd" id="toBeReplaced"> 
    <label id="dlgRspTime">10:23:55</label> 
    &nbsp; 
    <label id="dlgCharge">John</label> 
    <label>&nbsp;hangSheet</label> 
</div> 

JavaScriptでそれの世話をすることができますので、私は、IDを交換するものを与えるためにあなたを示唆しているがスニペット：

編集

$("#toBeReplaced").addClass("rightd").removeClass("leftd") 

：あなたはに$(this)を使用することができますクリックする正確なインスタンスを選択してください

$("#leftd").on("click", function(){ 
    $(this).addClass("rightd").removeClass("leftd"); 
}) 

より複雑なものを作成するためのこのスニペット