Question

在我的项目中，我使用ajax从DB获取html内容。我想要正确替换某人的div级别。而我唯一的判断条件是约翰的名字。如果我设置nameCst =“John”，如何在John class =“rightd”之前设置div

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);
        }
    });

在替换之前，beforeReplace的内容：

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

替换后，afterReplace的内容：

<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中唯一。

在显示内容后更改课程

关于您的问题，一个选项是在放置内容后立即更改类，因此您可以直接在DOM中操作它。如果你可以使用它，首先你必须放......

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

...你有两个选择：

如果您知道名称不会在不同的标签中匹配（即使是子字符串），一种快速的方法是使用：contains（）。在您的情况下，您可以选择并替换您在一行中提到的类...
```
var nameCst='John';
$('label:contains('+nameCst+')').parent().attr('class','rightd');
```
如果你的名字与其他标签中的子串相同（其中一个是'John Smith'而另一个是'John Wick'），那么你必须选择完全匹配，我会使用filter（）。在你的情况下......
```
var nameCst='John';

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

如果您有某种可视化问题，按此顺序处理（内容会眨眼或类似“丑陋”），只需先隐藏容器，将内容放入内容，更改类，然后显示容器

在显示内容之前更改课程

无论如何，如果由于某种原因你需要在加载上下文之前更改html，你可以这样...

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

我建议你给一个ID替换一个，这样你就可以在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片段：

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

已编辑：您可以使用$(this)选择要点击的确切实例

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

您可以使用此代码段创建更复杂的内容

如何在html

2 个答案: