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

Question

我有点受困于我的 javascript，我正在为一个站点制作一个 greasemonkey 脚本，它限制我只能使用普通的 javascript。现在，我的脚本目前做的是，搜索所有 table 和 table 行 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。我还差2步

循环所有 span
搜索所有包含data-content="apple"的span，如果span的none有这个属性，则删除它。

像这样：

对于这样的 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" 跨度，我们可以在不删除 div 元素的情况下执行循环的下一次迭代。这段代码没有经过测试，只是我脑海中浮现出来的，所以它可能需要一些调整。

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);            
});

};

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

work on all <span> at the current <div> then check for the value of an attribute of the <span>

javascript

attributes

nodes

greasemonkey

selectors-api