javascript - ajax调用后替换类名

Question

当我在我的代码上进行控制台登录时，我试图在加载ajax(更新到表)后替换类名

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
          console.log(x)
 });

它将打印此内容，我可以通过单击它来访问该标签，并看到在我的网站上选择了特定的 dom。每次调用ajax后，都会刷新表格，但不会刷新页面。

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody
1: tbody
2: tbody.linked-visual-table
3: tbody
rows: HTMLCollection(27) [tr.viz-tr-header, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr, tr]
align: ""
ch: ""
chOff: ""
vAlign: ""
title: ""
lang: ""
translate: true

我尝试用这个来记录 xhr，这就是它返回的内容

{url: "/arc/sqlrun/jsonselect_parallel", type: "POST", isLocal: false, global: true, processData: true, …}
url: "/arc/sqlrun/jsonselect_parallel"
type: "POST"
isLocal: false
global: true
processData: true
async: true

当我尝试在 html 集合上选择特定索引时，我做了 console.log(x[3])

它会打印，但是当我单击标签时，它会在我的控制台日志上打印出来，它不会突出显示我的浏览器上的任何内容，我相信所有 dom 都被替换了。我想要实现的是

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
          console.log(x)
        //Find td that has string of 'go' and add class green
        //Find td that has string of 'Stop' and add class red 
 });

我已经尝试解决这个问题好几天了，但我觉得我错过了一些步骤。每次在表上加载新数据时，它都会删除分配的类名

我尝试过查询选择器和数组索引，都返回在当前页面找不到Node。

更新

我已经实现了 @manikant gautam 解决方案，它附加到几乎所有的解决方案，但跳到我需要附加类的那个。

$( document ).ajaxComplete(function(e, xhr, settings) {
        var x = document.getElementsByTagName("tbody");
        //var x = document.querySelectorAll("tbody");
         console.log(x)
         addClasses();
      });

    function addClasses(){
        var x = document.getElementsByTagName("tbody")
         for (var i=0; i<x.length; i++){
              x[i].className += " custom";
         }

在我的控制台日志中，似乎避免将任何自定义类附加到该特定标记，但为什么？

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody..custom
1: tbody..custom
2: tbody.linked-visual-table.custom
3: tbody
4: tbody..custom
5: tbody..custom
6: tbody..custom
7: tbody..custom
8: tbody..custom
9: tbody..custom
10: tbody..custom
11: tbody..custom
__proto__: HTMLCollection

只有索引 3 处有值，除 3 之外的所有具有类名分配的索引根本没有值。这是否意味着，它在ajax上刷新后会自动创建一个新的div？

HTMLCollection(12) [tbody, tbody, tbody.linked-visual-table, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody, tbody]
length: 12
0: tbody..custom
1: tbody..custom
2: tbody.linked-visual-table.custom
3: tbody
rows: HTMLCollection(19)
length: 19
0: tr.viz-tr-header
1: tr
2: tr
3: tr

Answer 1

.addClass('Green') 您必须在匹配条件后应用。

  $( document ).ajaxComplete(function(e, xhr, settings) {
    var x = document.getElementsByTagName("tbody");
      console.log(x)
    //Find td that has string of 'go' and add class green
    //Find td that has string of 'Stop' and add class red 
    addClasses();
   });
    function addClasses(){
        var t = document.getElementById("table");
        var trs = t.getElementsByTagName("tr");
        var tds = null;

       for (var i=0; i<trs.length; i++){
            tds = trs[i].getElementsByTagName("td");
                  for (var n=0; n<tds.length;n++) {
               if(tds[n].innerHTML.contains("Go")){
                 $(tds[n]).addClass('Green');
               }
               if(tds[n].innerHTML.contains("Stop")){
                 $(tds[n]).addClass('Red');
               }
          }
        }
    }