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

时间:2015-10-31 10:22:51

标签: javascript

这是一个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内的按钮? 谢谢你的时间。

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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