英文:
How to change tabindex of all button inside a div using class
问题
I want to set tabindex for all button inside a div my structure is like this.
<div class="content">
<div> <button name="first" /> </div>
<div> <button name="second" /> </div>
<div> <button name="third" /> </div>
<div>
I am trying it with below code:
```javascript
const content = document.getElementsByClassName("content");
const kbButtons = content[0].getElementsByTagName("button");
kbButtons.map( (elem,index) => { elem.setAttribute("tabindex", '-1') })
英文:
I want to set tabindex for all button inside a div my structure is like this.
<div class="content">
<div> <button name="first" /> </div>
<div> <button name="second" /> </div>
<div> <button name="third" /> </div>
<div>
I am trying it with below code:
const content = document.getElementsByClassName("content");
const kbButtons = content[0].getElementsByTagName("button");
kbButtons.map( (elem,index) => { elem.setAttribute("tabindex", '-1') })
答案1
得分: 3
The Element.getElementsByTagName() method returns an HTMLCollection, and not an array. Since it's not an array, it doesn't have the Array.map() method. In addition, map is used to transform an array to a new array, not for side effects (this is the purpose of forEach()).
使用 Document.querySelectorAll() 来获取所有在 .content 下的按钮的 NodeList，然后使用 NodeList.forEach() 迭代它们，并设置 tab 键索引：
const kbButtons = document.querySelectorAll('.content button')
.forEach(elem => {
elem.setAttribute('tabindex', '-1')
})
<div class="content">
<div><button name="first">first</button></div>
<div><button name="second">second</button></div>
<div><button name="third">third</button></div>
</div>
英文:
The Element.getElementsByTagName() method returns an HTMLCollection, and not an array. Since it's not an array, it doesn't have the Array.map() method. In addition, map is used to transform an array to a new array, not for side effects (this is the purpose of forEach()).
Use Document.querySelectorAll() to get an NodeList of all buttons which are descendants of .content, and then iterate them with NodeList.forEach(), and set the tab index:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const kbButtons = document.querySelectorAll('.content button')
.forEach(elem => {
elem.setAttribute('tabindex', '-1')
})
<!-- language: lang-html -->
<div class="content">
<div><button name="first">first</button></div>
<div><button name="second">second</button></div>
<div><button name="third">third</button></div>
</div>
<!-- end snippet -->
答案2
得分: 2
You can use querySelectorAll():
const btns = document.querySelectorAll(".content button");
for (var i = 0; i < btns.length; i++) {
btns[i].setAttribute("tabindex", '-1');
}
<div class="content">
<div> <button name="first" /> </div>
<div> <button name="second" /> </div>
<div> <button name="third" /> </div>
<div>
英文:
You can use querySelectorAll():
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btns = document.querySelectorAll(".content button");
for(var i=0; i<btns.length; i++) {
btns[i].setAttribute("tabindex", '-1');
}
<!-- language: lang-html -->
<div class="content">
<div> <button name="first" /> </div>
<div> <button name="second" /> </div>
<div> <button name="third" /> </div>
<div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论