3

だから私は次のようなテーブルセルを持っています:

<td class="right footerCell">
    $51,888,734.24
    <div class="fht-cell" style="width: 128px;"></div>
</td>

テキストが div 内にある可能性があることはわかっていますが、このマークアップの一部はプラグインによって生成されています。場合によっては、div (セルに特定の幅を持たせるためにプラグインが使用している) に影響を与えずに、セル内の量を更新したいことがあります。現在、更新が必要なテキスト要素を一致させることができ、適切な値を読み取ることもできますが、変更しようとすると、単純に変更できません。私はこのようなものを使用しています:

//selects one of the cells above at a specific column
var totalCell = $("div.fht-fixed-body div.fht-tfoot table.fht-table tr > td.right.footerCell:nth-child(" + childNumber + ")");

//prints out $51,888,734.24
console.log($(totalCell).contents().eq(0).text());

$(totalCell).contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

//prints out $51,888,734.24 again
console.log($(totalCell).contents().eq(0).text());

それはおそらく本当にばかげたものですが、私には見えません。どんな助けでも大歓迎です、ありがとう。

編集 これが対応するJS Fiddleです。コンソールを確認して、正しくテストする必要があります。

4

2 に答える 2

2

これに対処するのにそれほど複雑なことはありません。単に jQuery アプローチを置き換えるだけです。

$(totalCell).contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

と：

totalCell[0].childNodes[0].nodeValue = 'value has been changed forever';

JSフィドル。

または、「more-jQuery」アプローチに固執したい場合は、次を使用できます。

totalCell.contents().eq(0).text(function(){
    return this.nodeValue = "VALUE HAS BEEN CHANGED FOREVER!";
});

JSフィドル。

jQuery ではa の値の設定を処理するのは簡単でtextNodeはありませんが、ネイティブ JavaScript を使用して簡単に設定できるため、上記の両方の方法で を使用します。ただし、複雑なセレクターを使用するのではなく、単純に:nodeValue

/* if you don't need to retain the jQuery methods of the selected node,
   I'd suggest using:
   $(".fht-cell").eq(0).get(0);
   omitted in this demo because I didn't know if you needed the jQuery methods */
var totalCell = $(".fht-cell").eq(0);

/* the `.get(0)` 'drops' the jQuery-wrapped node to a plain DOM node,
   allowing us to use native JavaScript traversal methods */
console.log("Before: " + totalCell.get(0).previousSibling.nodeValue);

// updating the nodeValue of the textNode:
totalCell.get(0).previousSibling.nodeValue = 'Value has been changed forever!';

console.log("After: " + totalCell.get(0).previousSibling.nodeValue);

JSフィドル。

ちなみに、次のように与えられています。

var totalCell = $("td.right.footerCell").eq(0);

totalCellはすでにjQuery オブジェクトであるため、jQuery で再ラップする必要はありません。したがって、次のようになります。

$(totalCell).contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

以下とまったく同じです:

totalCell.contents().eq(0).text("VALUE HAS BEEN CHANGED FOREVER!");

しかし、後者はもう少し効率的/簡潔です.JS Perfは、jQueryオブジェクトを不必要に再ラップすることで、わずかな（しかし絶対に不要な）パフォーマンスヒットを示唆しています.

参考文献:

于 2013-03-02T16:13:28.457 に答える