Question

我正在处理用于StackOverflow的用户脚本，它基本上用代理中的同一图像副本替换所有图像。

我想要的是将评论中发布的所有图像链接添加到名为imageContainer的注释中的新容器中，如果它尚未存在则应创建，然后将所有图像移动到此容器

我目前的工作方式 - 除了评论中的每个图像外，都会创建一个新容器。

以下是我目前的代码：

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length ; i++) {
    var matches = containsAny(links[i].href, matchURLs);
    if(matches) {
        //link variables
        var link = links[i];
        var linkParent = links[i].parentNode;

        console.log(linkParent);

        //create <img> element
        var image = document.createElement("img");
        image.src = proxy + link.href;
        image.height = 50;
        image.width = 50;

        //alter <a> element
        link.href = proxy + link.href;
        link.target = "_blank";
        link.innerHTML = "";
        link.style.borderBottom = "none";

        //attach <img> to <a>
        link.appendChild(image);

        var result = linkParent.contains(document.getElementById("imageContainer"));
        console.log(result);
        if(!result) {
            //create imageContainer (div) element
            var container = document.createElement("div");
            container.id = "imageContainer";
            linkParent.prepend(container);
        }
        //append image to container that exists from last check
        linkParent.querySelector("#imageContainer").appendChild(link);
    }
}

这一行：

var result = linkParent.contains(document.getElementById("imageContainer"));

总是导致false，即使我已经在前一个循环中创建了容器，这意味着为代码转换的每个图像创建了一个新的div，这使我更难格式正确。

基本上，当前代码将在我正在测试的注释中生成以下HTML：

<span class="comment-copy">
    <div id="imageContainer"><a href="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" height="50" width="50"></a></div>
    <div id="imageContainer"><a href="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" height="50" width="50"></a></div>
    currently testing my new userscript (relevant to discussion)  
</span>

正如您所看到的，它包含div imageContainer的2个副本，即使我拥有的循环应检查它是否存在，并且仅在不时才创建它>

我期望的结果如下：

<span class="comment-copy">
    <div id="imageContainer">
        <a href="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" height="50" width="50"></a>
        <a href="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web/https://i.stack.imgur.com/I8WNI.png" height="50" width="50"></a>
    </div>
    currently testing my new userscript (relevant to discussion)  
</span>

脚本正在页面加载时从tampermonkey运行。

为什么为每个链接创建一个新的div？

A Discovery：

上面的代码中提到了一个名为matchURLs的变量 - 我刚刚发现了最奇怪的事情。

此变量定义为

var matchURLs = ["https://i.stack.imgur.com/", "https://i.imgur.com/"];

它基本上只是用于检查图片是否来自的网址（我不想代理每个图片，只能代理上述网址中的图片）

但奇怪的是，如果我从数组中删除第二个链接，例如我将matchURL定义为

var matchURLs = ["https://i.stack.imgur.com/"];

然后代码按预期工作，并将所有图像放在一个imageContainer div而不是多个div中。这是问题的原因吗？为什么呢？

containsAny()函数定义为：

function containsAny(str, substrings) {
    for (var i = 0; i != substrings.length; i++) {
       if(str.startsWith(substrings[i])) {
         return true;
       }
    }
    return false;
}

Answer 1

使用parentLink.querySelector( '.image-container' )尝试选择作为.comment-copy元素子元素的图像容器。如果它为null，则它不存在，否则您有对该元素的引用。

运行代码段以查看第一个和第三个注释分别返回innerHTML 1和3的正确元素，第二个注释返回null，因为图像容器尚不存在。

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  var linkParent = links[i].parentNode;

  result = linkParent.querySelector('.image-container');

  console.log(result);
}

<span class="comment-copy">
    this comment has some links like <a href="https://i.stack.imgur.com/I8WNI.png" >image</a> and <a href="https://i.stack.imgur.com/I8WNI.png" >image</a>
        <div class="image-container">1</div>
</span>

<span class="comment-copy">
    this comment has some links like <a href="https://i.stack.imgur.com/I8WNI.png" >image</a> and <a href="https://i.stack.imgur.com/I8WNI.png" >image</a>
</span>

<span class="comment-copy">
    this comment has some links like <a href="https://i.stack.imgur.com/I8WNI.png" >image</a> and <a href="https://i.stack.imgur.com/I8WNI.png" >image</a>
        <div class="image-container">3</div>
</span>

检测父项内是否已存在子项

A Discovery：

1 个答案: