javascript - 如何替换 html 内容中的两个类属性？

Question

在我的元素中，我使用ajax从数据库中获取html内容，这些内容将出现在id为timeTagDiv的div中的web中。

如果我的名字是约翰，它应该出现:

                                                17:05:31 John translatetomaintanceGroup
                                                                         letMnGrpmakeit

 17:05:53 snow acceptSheet
 17:06:04 snow translatetoleadGrp
 leadercheckit

如果我的名字是雪，它应该出现:

17:05:31 John translatetomaintanceGroup
letMnGrpmakeit     

                                                             17:05:53 snow acceptSheet
                                                      17:06:04 snow translatetoleadGrp
                                                                         leadercheckit

这是我的 ajax 代码:

var stChr="John";
var stTrnStr="translateto";
$.ajax({
        ......
        success:function(data) 
        { 
         var $myHtml = $(data.stPrc);
         $myHtml.find("label").filter(function(){
             return $(this).text()===stChr;
             }).parent().attr("class", "rightd");
         //$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().attr('class','rightd');
         $('#timeTagDiv').html($myHtml);
        }
    });

这是来自数据库的 data.stPrc 的内容:

<div class="leftd">
 <label>17:05:31</label>&nbsp;
 <label>John</label>
 <label>&nbsp;translateto</label>
 <label>maintanceGroup</label>
</div>
<div class="leftd">
  <div class="speech left" >letMnGrpmakeit</div>
</div>
<div class="leftd"><label>17:05:53</label>&nbsp;
  <label>snow</label>
  <label>&nbsp;acceptSheet</label>
</div>
 <div class="leftd">
 <label>17:06:04</label>&nbsp;
 <label>snow</label>
 <label>&nbsp;translateto</label>
 <label>leadGrp</label>
</div>
<div class="leftd">
 <div class="speech left" >leadercheckit</div>
</div>

当label的上下文为John时，parent div的属性类变为rightd。这是成功运行的代码:

$myHtml.find("label").filter(function(){
             return $(this).text()===stChr;
             }).parent().attr("class", "rightd");

然后，letMnGrpmakeit 的内容属于 John should 在右侧。所以接下来的两个div类应该设置class="rightd"和class="speech right"。

在我的示例中，之前:

<div class="leftd">
  <div class="speech left" >letMnGrpmakeit</div>
</div>

替换后:

<div class="rightd">
  <div class="speech right" >letMnGrpmakeit</div>
</div>

我用:

$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().attr('class','rightd');
$myHtml.find('div:contains('+stChr+' '+stTrnStr+')').next().next().attr('class','speech right');

但不幸的是，他们都失败了。

我试过一种情况:

$myHtml.find('label:contains('+stTrnStr+')').parent().next().attr('class','rightd');

它有效，但看起来像:

                                                17:05:31 John translatetomaintanceGroup
                                                                         letMnGrpmakeit

 17:05:53 snow acceptSheet
 17:06:04 snow translatetoleadGrp
                                                                            leadercheckit

“leadercheckit”应该在“17:06:04 snow translatetoleadGrp”下，因为它属于雪。

我对此一无所知。更改两个 div 类的关键是两个条件。

谁能帮帮我？

Answer 1

由于措辞和语法，我不确定我是否正确理解了所有内容，但我建议使用 addClass('className')和 removeClass('className')反而。这样，如果您的元素有多个类，它只会删除所需的类。通过使用 .attr('class', 'className')，您将替换所有内容。如果你想添加多个类，只需使用 .addClass('class-1 class-2')