jQuery removeClass和addClass？

Question

我想在表td中加上类别为“新”的<div id="demo">。我得到<div id="demo">的文本，所以“名称”。在jQuery代码中;如果文本是​​关于td的类应该改变。但这个jQuery代码不起作用。我能做什么？

<script src="http://ajax.googleapis.com/ajax/libs/jQuery/1.11.1/jQuery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      var x = $("div#demo").text(); 
      if(x == "abc"){ 
       $(this).closest("td").removeClass("old"); 
       $(this).closest("td").addClass("new"); 
      } 
     }); 
    </script> 
    <h:body> 
<table cellspacing="10"> 
       <tr> 
        <td class="old"> 
         <h:dataTable value="#{bean.fonk()}" var="myvar" rows="1" first="0"> 
          <h:column>#{bean.surname} 
          <div id="demo" style="visibility: visible">#{myvar.name}</div> 
          </h:column> 
         </h:dataTable> 
        </td> 
        <td class="old"> 
         <h:dataTable value="#{bean.fonk()}" var="myvar" rows="1" first="1"> 
          <h:column>#{bean.surname} 
          <div id="demo" style="visibility: visible">#{myvar.name}</div> 
          </h:column> 
         </h:dataTable> 
        </td> 
        <td class="old"> 
         <h:dataTable value="#{bean.fonk()}" var="myvar" rows="1" first="2"> 
          <h:column>#{bean.surname} 
          <div id="demo" style="visibility: visible">#{myvar.name}</div> 
          </h:column> 
         </h:dataTable> 
        </td> 
        <td class="old"> 
         <h:dataTable value="#{bean.fonk()}" var="myvar" rows="1" first="3"> 
          <h:column>#{bean.surname} 
          <div id="demo" style="visibility: visible">#{myvar.name}</div> 
          </h:column> 
         </h:dataTable> 
        </td> 
       </tr> 
      </table> 

      <table cellspacing="10"> 
       <tr> 
        <td class="old"> 
         <h:dataTable value="#{bean.fonk()}" var="myvar" rows="1" first="4"> 
          <h:column>#{bean.surname} 
          <div id="demo" style="visibility: visible">#{myvar.name}</div> 
          </h:column> 
         </h:dataTable> 
        </td> 
    </h:body> 

Answer 1

更改id属性class ES：

function tryMe() { 
 
    $('.old .demo').each(function() { 
 
    if ($(this).text() == 'abc') { 
 
     $(this).parent().parent().removeClass('old').addClass('new'); 
 
    } 
 
    }); 
 
} 
 

 
tryMe();

.old { 
 
    color:blue; 
 
} 
 

 
.new { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table cellspacing="10"> 
 
       <tr> 
 
        <td class="old"> 
 
         <h:dataTable value="" var="myvar" rows="1" first="0"> 
 
          <h:column>1 
 
          <div class="demo" style="visibility: visible">abcdefgh</div> 
 
          </h:column> 
 
         </h:dataTable> 
 
        </td> 
 
        <td class="old"> 
 
         <h:dataTable value="" var="myvar" rows="1" first="1"> 
 
          <h:column>2 
 
          <div class="demo" style="visibility: visible">abcdefg</div> 
 
          </h:column> 
 
         </h:dataTable> 
 
        </td> 
 
        <td class="old"> 
 
         <h:dataTable value="" var="myvar" rows="1" first="2"> 
 
          <h:column>3 
 
          <div class="demo" style="visibility: visible">abcde</div> 
 
          </h:column> 
 
         </h:dataTable> 
 
        </td> 
 
        <td class="old"> 
 
         <h:dataTable value="" var="myvar" rows="1" first="3"> 
 
          <h:column>4 
 
          <div class="demo" style="visibility: visible">abc</div> 
 
          </h:column> 
 
         </h:dataTable> 
 
        </td> 
 
       </tr> 
 
      </table>

Answer 2

多次使用相同ID的不好，但是这就是为什么你的代码没有设置类如您期望：

$(document).ready(function(){ 
    console.log($(this)); 

    var closestTD = $(this).closest("td"); 
    console.log(closestTD); 
}); 

当您在文档准备处理程序中时$(this)是文档。 $(this).closest("td")选择器不会找到您想要的元素。

你会想要做的是改变这些div具有相同的类名称（例如：“示范”）和环比他们.each：

$(document).ready(function(){ 
    $("div.demo").each(function(index) { 
     var demoDivText = $(this).text(); 
     console.log(index + ": " + demoDivText); 

     var closestTD = $(this).closest("td"); 
     console.log(closestTD); 

     if(demoDivText === "abc"){ 
      closestTD.removeClass("old").addClass("new"); 
     } 
    }); 
});