某些div下的Javascript点击按钮功能

Question

这是一个HTML页面中按钮的代码

<a class="btn" role="button" href="#">Click me</a>

我有一段javascript代码，用于单击某个类的按钮

var clickBtn = document.getElementsByClassName('btn'); 
for(var i=0;i<clickBtn.length;i++)
{ 
clickBtn[i].click(); 
} 

这段代码单击所有页面中带有“btn”类的每个按钮。但是在同一个页面中有一些其他按钮具有相同的类。所以我希望我的javascript代码被修改为只点击某个div中的某个按钮。

div的代码是

<div class="inside">
<span>
<a class="btn" role="button" href="#">Click me</a>
</span>
</div>

你知道我该如何修改javascript代码，只点击该div中的按钮吗？？谢谢你抽出时间。

Answer 1

var parentDiv = clickBtn[i].parentNode;

var clickBtn = document.getElementsByClassName('btn'); 
for(var i=0;i<clickBtn.length;i++)
{ 
var parentDiv = clickBtn[i].parentNode;
  if(parentDiv == yourDiv)
   {
    clickBtn[i].click(); 
   } 
}

我不确定，var parentDiv=clickBtn[I]。parentNode将工作。但想法是一样的。

Answer 2

如果您想要一个非jQuery解决方案，您可以使用getElementById来获取div，然后getElementsByClassName来获取该div中的所有按钮。

var insideDiv = document.getElementById("inside");
var buttonsInsideDiv = insideDiv.getElementsByClassName();

Answer 3

您可以使用querySelectorAll（）

Array.from(document.querySelectorAll('.inside  .btn')).forEach(btn => {      
   alert(btn.innerHTML)
   btn.click();
});

或没有es6：

[].slice.call(document.querySelectorAll('.inside  .btn')).forEach(function(btn) {
    alert(btn.innerHTML)
    btn.click();
});

演示

更新您的评论（你可以更新您的代码，如果有一个id在跨度喜欢不点击按钮？）：

[].slice.call(document.querySelectorAll('.inside  .btn')).forEach(function(btn) {

    if (btn.parentNode.id != 'clicked') {
        alert(btn.innerHTML);
        btn.click();
    }

});

或者，您可以将querySelectorAll（）与：not条件一起使用，以避免if检查：

Array.from(document.querySelectorAll('.inside span:not([id="clicked"]) .btn'))
    .forEach(btn => {
        alert(btn.innerHTML)
        btn.click();
    });