如果满足共同祖先的后代条件，如何 select 一个元素？

Question

我有一个页面有多个 div 个元素 class 'container'，即：

<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>

如何 select class 'delete' 的所有按钮，但前提是 a 元素有 origin="internal"?

两个元素的共同祖先是 class "container" 的 div。

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

Answer 1

过滤并映射所有容器：

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。）}

Answer 2

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

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

如果满足共同祖先的后代条件，如何 select 一个元素？

How to select an element if a condition on a descendant of a common ancestor is met?

javascript

jquery

xpath

jquery-selectors