jQuery的：能閱讀文字寬鬆但不更新正確

Question

所以我有表細胞，如：

<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。您需要檢查控制檯以正確測試它。

Answer 1

jQuery似乎不喜歡改變文本節點。希望別人可以解釋爲什麼，但它周圍的最簡單的方法是創建一個新的文本節點，將其插入，然後刪除舊的：

$(totalCell).contents().eq(0).before('Changed Forever').remove(); 

當然，這是一個多解的方法，但應該足夠了您的需求，並可以產生相同的DOM結構

Answer 2

有沒有很大的複雜性來解決這個（即不span標籤或類似的包裝吧），只需更換jQuery的方法：

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

隨着：

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

JS Fiddle。

或者，如果你想堅持用 '更jQuery的' 方法，你可以使用：

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

JS Fiddle。

雖然jQuery的不會使它容易處理設置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 Fiddle。

順便說一下，給出以下：使用jQuery

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

totalCell是已經一個jQuery對象，你並不需要重新包裝它，因此：

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

是正好相同：

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

但後者更有效率/簡潔一點，JS Perf建議a slight (but absolutely unnecessary) performance-hit不必要地重新包裝一個jQuery對象。

參考文獻：

• get()。
• Node.nodeValue。