jQuery findで返される要素のテキストを操作するにはどうすればよいですか？

Question

私はjQueryを初めて使っていますが、おそらく私はこれについて間違っていると思います...

私はすべてのtrのn番目のtdを選択し、数式を計算します（値を60で割ります）。新しい値をtdに返します。

$('#table tbody').find('tr td:eq(2)').text($(this).text()/60);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>800</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sally</td> 
 
     <td>5</td> 
 
     <td>610</td> 
 
     <td>9</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bob</td> 
 
     <td>7</td> 
 
     <td>249</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

jqueryの give examples CSSをこのように操作するドキュメント、私は.textセクションを通じて（）同様のことを行うことができるだろうように思えます。

コンソールでエラーが返されず、後でconsole.logも実行されるので、それが継続していることがわかりますが、DOMでは値が変更されません。

.find（）の代わりに.each（）を使用する必要がありますか？どんな助けもありがとうございます。

Answer 1

.text()の関数引数を使用する必要があります。この関数は、テキストの古い値を引数として呼び出され、戻り値がそれを置き換えます。

$('#table tbody').find('tr td:nth-child(2)').text(function(i, oldtext) 
    return parseInt(oldtext)/60; 
}); 

あなたが機能を使用しない場合

は、 $(this).text()/60はが text()を呼び出す前 を実行しているので、呼び出し元のコンテキストにあるものは何でもthis使用しています。

:eqではなく、:nth-childを使用して、各行の3番目のセルにアクセスする必要があります。それ以外の場合は、結果セット全体の3番目のセルにアクセスするだけです。

Answer 2

あなたのコードはほぼ正しいですが、一致したすべてのtd要素に対して実行されるように、匿名機能でtext()にロジックを提供する必要があります。インデックスが次にない23、であるが、nth-childは1ベースのインデックスを使用するよう -

はまた、find()を使用しなくても各列におけるtdを取得するために単一:nth-childセレクタを使用することができることに注意してください。あなたが必要な場合は、小数点以下の指定した数に結果を設定するtoFixed()を使用することができます

$('table tbody tr td:nth-child(3)').text(function(i, t) { 
 
    return parseInt(t, 10)/60; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>800</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sally</td> 
 
     <td>5</td> 
 
     <td>610</td> 
 
     <td>9</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bob</td> 
 
     <td>7</td> 
 
     <td>249</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

注：これを試してみてください。

Answer 3

@Roryと@Barmarは、私が上記の実装に使用していたものですが、将来のjQuery開発作業に役立ついくつかのことに気付きました。最初に、 'table'の値を持つコードにIDが表示されなかったので、jQueryはid = 'table'を見つけることができなかったため、tdsを見つけられませんでした。第2に、find関数が上で動作する方法は、すべてのtrに続く3番目のtdを見つけるだけです。すべてのtsのリストからすべてのtdsを2位にしたい場合は、$('table body tr')のようなtrの各グループを探すように配列を設定し、次にtdsのfindを使用する必要があります。あなたは各ステートメントを使用したい場合は最後に、あなたは以下のような何かができる：

var els = $('table tbody tr').find('td:eq(2)'); 
 
$.each(els, function(index,value){ 
 
    var thisNum = parseInt($(value).text()); 
 
    $(value).text(thisNum/60); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>2</td> 
 
     <td>800</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sally</td> 
 
     <td>5</td> 
 
     <td>610</td> 
 
     <td>9</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bob</td> 
 
     <td>7</td> 
 
     <td>249</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>