引用傳遞上的forEach

這裏是我的問題的一些代碼：引用傳遞上的forEach

var jsdom = require('jsdom'); 

var content = '\ 
    <p>\ 
     <img src="assets/logo">\ 
     <img src="assets/background">\ 
    </p>\ 
'; 

jsdom.env(content, function (error, window) { 
    var $ = require('jquery')(window) 
    var elements = $.find('img'); 

    elements.forEach(function(imageElement) { 
     var src = $(imageElement).attr('src') + '.jpg'; 

     $(imageElement).attr('src', src); 

     // print "assets/logo.jpg" and "assets/background.jpg" 
     console.log($(imageElement).attr('src')); 
    }); 

    console.log(content); 
});

我想要做的是，改變了src每img元素assets/logo.jpg和assets/background.jpg內容。

任何人都可以建議我，我必須做什麼才能使content更改爲：<p><img src="assets/logo.jpg"><img src="assets/background.jpg"></p>？

來源

2014-12-02 Crazenezz

將新的'innerHTML'分配給'content'？檢查jsdom文檔以瞭解如何將DOM序列化回html。 – Bergi 2014-12-02 12:44:47

@Bergi：我的意思是，我想從'$（imageElement）.attr（'src'，src）'這行代碼改變'content';但不幸的是它不能直接改變'content'的值。 – Crazenezz 2014-12-02 12:50:59

當然你不知道。 'content'是一個字符串。 DOM不存儲在一個字符串中，你操作的是一個節點樹。您從中創建DOM的字符串將保持不受影響。您需要將其序列化回新的字符串。 – Bergi 2014-12-02 13:07:24

你應該使用這樣的序列化DOM：

console.log(window.document.body.firstChild.outerHTML);

由於BERGI在評論什麼jsdom操縱是一個DOM樹指出，jsdom不會去回源HTML和變化那。你需要做的是序列化DOM樹，並使用通常的DOM方法來做到這一點。 window.document.body.firstChild位爲你的段落。 .outerHTML位是你如何獲得你的段落的序列化。

另一種方法是要做到：

console.log(window.document.body.innerHTML);

在你的情況下，做同樣的事情作爲第一種方法。而不是要求序列化的段落，這是要求身體元素的內容序列化（這恰好是段落的父母）。

如果您想知道爲什麼我們不得不大驚小怪body，這是因爲jsdom充當瀏覽器：它需要您給它並清理它，使其看起來像正確的HTML。一旦jsdom解析了你的源代碼，但之前對其進行修改，這是什麼樣子的，結構：

<html> 
    <head></head> 
    <body> 
    <p>   
     <img src="assets/logo"> 
     <img src="assets/background"> 
    </p> 
    </body> 
</html>

（。以上是適合打印突出結構元素之間的空白肯定是關閉）

來源

2014-12-02 13:09:00 Louis

謝謝你的線索。 – Crazenezz 2014-12-02 13:13:50

引用傳遞上的forEach

回答

相關問題