如果满足共同祖先的后代的条件，如何选择元素？答案

【问题标题】：How to select an element if a condition on a descendant of a common ancestor is met?如果满足共同祖先的后代的条件，如何选择元素？
【发布时间】：2018-09-03 03:04:24
【问题描述】：

我有一个包含多个 div 类“容器”元素的页面，即：

<div class="container">
    <div class="data"> 
        <a class="myclass" href="foo" origin="internal"> 123456789 </a> 
    </div>
    <div class="actions">
        <button class="save" role="add" add="Save" remove="Remove"> Save </button>
        <button class="delete" role="add" remove="Discard" rel="nofollow"> Discard </button>
    </div>
</div>

如何选择“删除”类的所有按钮，但前提是 a 元素具有 origin="internal"？

两个元素的共同祖先是“容器”类的 div。

此外，如何以编程方式在页面加载时单击所有这些按钮？

【问题讨论】：

如何绑定共同祖先级别？最后，一切都有共同的祖先body。那么容器呢？
刚刚编辑了问题。共同祖先是“容器”类的 div 元素。
Select element 和 programmatically click element 是不同的任务。您的确切问题是什么？还请让我们知道您已经尝试过什么并描述您遇到的问题。目前看来，您只是希望有人来做您的工作。这不是 SO 应该用于的目的
抱歉，我已经 4 年没有编码了，现在我觉得自己像个新手......我的目的是选择这些按钮，以便我可以点击它们。不确定这是否是一个好方法......

标签： javascript jquery xpath jquery-selectors

【解决方案1】：

您可以使用class="delete" 选择所有按钮，然后您可以使用if else statement。例如：

$('.delete').on('click',function(){
    if($(this).parent().data('origin') == 'internal'){
        //do something
    }else{
       //do something else
    }
})

【讨论】：

我刚刚再次编辑了这个问题，因为我的下一个问题是：如何以编程方式点击所有这些按钮？
是的，这就是我写这个答案的原因，如何点击这些元素。

【解决方案2】：

过滤和映射所有容器：

const result = Array.from(document.querySelectorAll(".container"))
     .filter(c => c.querySelector("a[origin=internal]"))
     .map(c => c.querySelector("button.delete"));

console.log(result);

<div class="container">
    <div class="data"> 
        <a class="myclass" href="foo" origin="internal"> A </a> 
    </div>
    <div class="actions">
        <button class="save" role="add" add="Save" remove="Remove"> Save </button>
        <button class="delete" role="add" remove="Discard" rel="nofollow"> Discard A </button>
    </div>
</div>
<div class="container">
    <div class="data"> 
        <a class="myclass" href="foo" origin="external"> B </a> 
    </div>
    <div class="actions">
        <button class="save" role="add" add="Save" remove="Remove"> Save </button>
        <button class="delete" role="add" remove="Discard" rel="nofollow"> Discard B </button>
    </div>
</div>
<div class="container">
    <div class="data"> 
        <a class="myclass" href="foo" origin="internal"> C </a> 
    </div>
    <div class="actions">
        <button class="save" role="add" add="Save" remove="Remove"> Save </button>
        <button class="delete" role="add" remove="Discard" rel="nofollow"> Discard C </button>
    </div>
</div>

_{（此外，我认为永远不应该使用jQuery。）}

【讨论】：

谢谢你，H.B！很好的解决方案。顺便说一句，我如何以编程方式单击您的过滤器和地图解决方案返回的所有按钮？
@user2883935：只需添加.forEach(b => b.click())。
Glab 帮助 :) 如果您认为这充分回答了问题，您可以单击答案左侧的复选标记大纲以接受它。