javascript - 无法更改 div 中的文本

Question

我有一个脚本可以使用 TreeWalker 逐字翻译俄语论坛。 ，但有一种 div 元素我无法更改其文本，这是我的问题，我该如何更改它？由于该论坛需要注册，我将尝试在下面提供我能提供的所有代码细节。

---

我试图更改文本的网页特定代码:

<div class="sp-wrap">
    <div class="sp-head folded clickable">Скриншоты</div> //once clicked unhide the div below to show images and by clicking it again hides.
    <div class="sp-body inited" title="" style="display: none;"> //hidden div
        <div class="clear"></div>
        <h3 class="sp-title">Скриншofы</h3>
        <span class="post-align" style="text-align: center;">
        <div class="clear"></div>
        <div class="sp-fold clickable">[свернуть]</div>
    </div>
</div>

• 我正在尝试为 sp-head 类中的图像更改 Скриншоты，这是我单击以显示图像的那个。

---

该类的 CSS 代码:

.sp-head {
    border-width: 0;
    color: #2a2a2a;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    margin-left: 6px;
    padding: 1px 14px 3px;
}

---

我的代码如下:

//... header
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

$('div.sp-wrap > div:first').each( function (){ //div:contains("Скрин") div.sp-head.folded.clickable

    var jThis = $(this);
    var jText = jThis.textContent;
    var jhtml = jThis.html();

    console.log(jText);
    console.log(jThis);
    //console.log(jhtml);

    jText = jText.replace(/Скрин(лист|шоты)/ig, "Images");

});

var textWalker   = document.createTreeWalker (
    document.body,
    NodeFilter.SHOW_TEXT,
    {   acceptNode: function (node) {
        // Skip whitespace-only nodes
        if (node.nodeValue.trim() )
            return NodeFilter.FILTER_ACCEPT;

        return NodeFilter.FILTER_SKIP;
    }
    },
    false
);

var textNode;

while (textNode  = textWalker.nextNode() ) {
    var oldText  = textNode.nodeValue;
    var newText  = oldText.replace (/Главная/ig, "Home");
    newText      = newText.replace (/Скрин(лист|шоты)/ig, "Images");
    newText      = newText.replace (/Последние поблагодарившие/ig, "Last Who Thank");
    //...
    //repeats word by word until ends at the line below     
    textNode.nodeValue = newText;
}

---

我尝试过的

我已经尝试了一堆可以获取那个 div 子元素的 jQuery 过滤器，但它就像不存在一样。

当我使用以下方法选择 div 本身时:

$('div.sp-head.folded.clickable')

控制台结果为空白。

当我运行我在这里发布的代码时(在标题下方的代码下)，结果是

分别用于 jText 和 jThis 变量

最后当我尝试

$('div.sp-wrap div:contains("Скрин")').each( function (){ 

    var jThis = $(this);
    var jText = jThis.text();
    jThis.text("Images");

});

我用 Images 这个词代替了真实的 Images

当我尝试使用时也失败了

$('div.sp-wrap div:contains("Скрин")').each( function (){ 

    var jThis = $(this);
    var jText = jThis.text();
    jThis.parent().text("Images");

});

导致包装被破坏

---

因为它是一个像其他文本一样被替换的文本，我不明白为什么 TreeWalker 没有“看到”那种 div 文本。

---

• 添加以澄清评论

所有 span 标签看起来都是关闭的，即使是包裹在图像上的标签也是关闭的。

Answer 1

昨天我想出了解决办法，之前不能在这里发帖。包装内容是AJAXed ，因此当脚本运行时要选择的元素还没有准备好。为了处理这个问题，我使用了 WaitForKeyElements() .在分析了“最后感谢的人”列表后，我发现了这个问题，不敢相信我以前从未见过。

解决方案:

//...header
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==


waitForKeyElements ("div.sp-head.folded.clickable", translateDiv);


function translateDiv (jNode) {

    var jText  = jNode.text();
    var reg    = /Скрин(лист|шоты)/ig;

    if (reg.test (jText) ) {

        jNode.text( jText.replace(/Скрин(лист|шоты)/ig, "Images") );

    } else if (jText.indexOf("Последние поблагодарившие") != -1) {

        jNode.text("Last Who Thanks");

    }

}