javascript - nextElementSibling 卡住 firefox

Question

我正在尝试搜索特定文本以在找到链接时突出​​显示该链接。因为链接不在h4标签里面我不知道怎么解决。

html代码

<h4>Title P</h4>
...
<h4>Title X</h4>
<p class="item">
<a href="url" target="_new">ABC</a>
</p>
<div class="c">
<p class="item">
<a href="url" target="_new">EFG</a>
</p>
<div class="c">
<p class="item">
<a href="" target="_new">MNO</a>
</p>
<div class="c">
<p class="item">
<a href="url" target="_new">XYZ</a>
</p>
<h4>Title Z</h4>
...

我想在其他 h4 标签下重复查找的文本，但我只想突出显示标题 X 中的文本。

这是我的代码:

// @grant       GM_addStyle
...
var h4 = document.getElementsByTagName("h4");

for (var i = 0; i < h4.length ; i++) {

    if (h4[i].textContent.indexOf("Title X") != -1) {

        var links = h4[i].nextElementSibling;

        while (links && links.nodeName != "H4") {

            if (links.textContent.indexOf("EFG") != -1){
                links.setAttribute("id","color");
            }
            if (links.textContent.indexOf("MNO") != -1){
                links.setAttribute("id","color");
            }

        }

    }
}

GM_addStyle ( '                                 \
    #color {                                    \
        background-color: #ffd65e;              \
    }                                           \
' );

如果我删除 while，浏览器不会卡住。

回答后的工作代码是:

var links = h4[i];
while ( (links = links.nextElementSibling) && (links.nodeName != "H4") ) {

            if (links.textContent.indexOf("EFG") != -1) {
                links.setAttribute("id", "color");
            }
...
}

Answer 1

这似乎是您的代码的预期行为。请参阅以下两行。

var links = h4[i].nextElementSibling;
while (links && links.nodeName != "H4") {

您将 links 设置为当前 h4 元素之后的元素(在本例中为第一个，因为它永远不会继续)，并反复检查该元素是否是truthy 并且不是 h4 元素。此 while 语句的主体中没有任何地方是 links 重新分配的，因此它简单地一遍又一遍地进行相同的检查，从而导致您的脚本挂起。

我不确定您要用这个脚本做什么，但也许您打算做一些链接来迭代同级元素？

var links = h4[i];
while ( (links = links.nextElementSibling) && (links.nodeName != "H4") ) {