Question

我正在使用Greasemonkey和waitForKeyElements()更改网页中的某些文字。

以下是单个jNode元素的示例。

<div class="Ov-h Mx-a">
    <div>
        <div class="Grid-bind-end">
            <div class="ysf-player-name Nowrap Grid-u Relative Lh-xs Ta-start">
                <a class="Nowrap" href="http://sports.yahoo.com/nfl/players/7206" target="sports">H. Miller</a> <span class="Fz-xxs">Pit - TE</span>
            </div>
        </div>

        <div class="Grid-bind-end">
            <span class="ysf-player-status F-injury Fz-xxs Grid-u Lh-xs"></span>

            <div class="ysf-player-detail Nowrap Grid-u Fz-xxs Lh-xs Ta-start">
                <span class="ysf-game-status"><a class="F-reset" href="http://sports.yahoo.com/nfl/pittsburgh-steelers-new-england-patriots-20150910017/" onclick="pop(this)" target="sports">Thu 5:30 pm @ NE</a></span>
            </div>
        </div>
    </div>
</div>

我想将Thu 5:30 pm @ NE更改为Thu 5:30 pm @ < span class="color">NE - [rank]</span>（请注意[rank]是我的变量）

这是我试过的

jNode.text((jNode.text().replace("NE","<span class='color'>NE - [rank]</span>")))

但这会让元素失去它的风格。

Answer 1

目前您只使用<div class="Ov-h Mx-a">中整个节点树的文本（＆＃34; H.Miller-TE＆＃34;等），并将其用作新内容，丢弃所有现有的html布局。 DIV。

正确的方法通常是仅更改相关元素的内容以避免重新创建兄弟元素（以便附加addEventListener或on的事件监听器继续工作在他们身上）并使用.html()（因为你正在添加HTML）：

var link = jNode.find(".F-reset");
link.html(link.html().replace("NE","<span class='color'>NE - [rank]</span>"));

使用waitForKeyElements包含跨度的文本是否会破坏样式？

1 个答案: