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

此代码点击了班级＆＃34; btn＆＃34;在所有页面中。但是同一页面中有一些其他按钮具有相同的类。所以我希望我的javascript代码可以修改为点击只有特定div中的某个按钮。

div的代码是

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

任何想法如何修改我的JavaScript代码只点击该div内的按钮？谢谢你的时间。

Answer 1

您可以使用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();
});

DEMO

更新了您的评论（如果跨栏中有ID而不是点击按钮，您是否可以更新代码？）：

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

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

});

或者您可以使用:not条件的querySelectorAll（）来避免if检查：

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

Answer 2

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

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

Answer 3

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会起作用。但这个想法是一样的。

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

3 个答案: