jQuery removeClassとaddClass？

Question

<div id="demo">でテーブルtdに "new"クラスを追加したいと思います。私は<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

は class ESにご id属性を変更し

：

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")セレクタでは、目的の要素が見つかりません。あなたは `id`年代を再利用している

$(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"); 
     } 
    }); 
});