javascript - 处理当前 <div> 处的所有 <span>，然后检查 <span> 属性的值

Question

我有点被我的 JavaScript 困住了，我正在为一个网站制作一个 Greasemonkey 脚本，这限制了我只能使用普通的 JavaScript。目前，我的脚本当前所做的是，使用 ProjectTable-row 搜索所有表和表行，然后为每个 ProjectTable-row 查找 div 和 ProjectTable-status，如果找不到 div ，它将删除整行。

效果很好。

document.getElementById("gmSomeID").onclick = function showAlert() {
    console.log('invoked');
    var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
        projectDescriptions = Array.prototype.slice.call(projectDescriptions); 
    projectDescriptions.forEach(function(el) { 
        if (el.querySelector('div.ProjectTable-status')) {
        } else {
             el.parentNode.removeChild(el);
        }
    });
}

但是，现在我不知道如何处理当前的 div 并在其中的所有 span 上循环。我还差两步。

1. 在所有span上循环
2. 搜索所有包含data-content="apple"的span，如果没有一个span具有此属性，则将其删除。

类似这样的事情:

对于这样的 HTML 标签:

<div class="ProjectTable-status">
    <span data-content="apple">
    </span>
</div>

这不会被删除data-content是apple。

对于这样的 HTML 标签:

<div class="ProjectTable-status">
    <span data-content="banana">
    </span>
</div>

这将被删除，没有 data-content="apple" 的跨度。

对于这样的 HTML 代码:

<div class="ProjectTable-status">
    <span data-content="banana"></span>
    <span data-content="apple"></span>
</div>

这不会被删除，div 至少包含 1 个 span，其 data-content 为 apple.

我不知道，现在如何继续，真的很累或尝试任何事情，我什至不知道如何检查属性值。

希望有人能指导或让我走上正确的道路。

谢谢!

Answer 1

从您提供的内容开始，我只是稍微重构了它，以在循环时检查每个 div 中是否有“apple”跨度。使用 continue，如果我们发现 div 元素包含“apple”跨度，我们可以执行循环的下一次迭代，而无需删除该元素。这段代码没有经过测试，只是我想到的，所以它可能需要一些调整。

document.getElementById("gmSomeID").onclick = function showAlert() {
console.log('invoked');
var projectDescriptions = document.querySelectorAll('tr.ProjectTable-row'),
    projectDescriptions = Array.prototype.slice.call(projectDescriptions);
//pointer to work with current div 
var currentDiv;
projectDescriptions.forEach(function(el) { 
    currentDiv = el.querySelector('div.ProjectTable-status');
    //do we have a div?
    if (currentDiv) {
        //look for an apple within the div
        if(currentDiv.querySelector('span[data-content="apple"]')){
             //go to the next iteration of the loop without delete
             continue;
        }
    } 
    //if we made it this far, we didn't find an apple
    el.parentNode.removeChild(el);            
});

};