如何在具有相同类名的div中获取children元素
[英]How to get the children element inside a div with a same class name
问题描述
i try to make a trigger button from a div children with the same class,but my code below seems not working properly, i try to make a looping at first to get the class box then try to get the children from each box, but it seems not working. 
我尝试从具有相同班级的div孩子们制作一个触发按钮，但是下面的代码似乎无法正常工作，我尝试先进行循环以获取班级框，然后尝试从每个框中获取孩子们，但是它似乎不起作用。
var container = document.querySelector(".container"); var box = document.getElementsByClassName("box"); for(var i = 0; i < box.length; i++){ var x = box[i].children; x.addEventListener("click", function(){ console.log('hello world') }) }
.container { border: 1px solid black; padding: 10px; } .box { width: 100px; height: 100px; background: red; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> </div> </body> </html>
4 个解决方案
解决方案1
1 2018-03-14 10:13:53
try to make a looping at first to get the class box then try to get the children from each box, but it seems not working.
children returns List of Elements , you need to access the first one ( button ) children返回元素列表 ，您需要访问第一个（ 按钮 ）
var x = box[i].children[0];
Demo 演示
var container = document.querySelector(".container"); var box = document.getElementsByClassName("box"); for(var i = 0; i < box.length; i++){ var x = box[i].children[0]; x.addEventListener("click", function(){ console.log('hello world') }) }
.container { border: 1px solid black; padding: 10px; } .box { width: 100px; height: 100px; background: red; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> </div> </body> </html>
Note 注意
- If there are multiple
buttons inside eachbox, then you need to iteratechildren.如果每个box都有多个button，则需要迭代children。
解决方案2
1 已采纳 2018-03-14 10:14:10
box[i].children is returning a collection (see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children ) box[i].children正在返回集合（请参阅https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children ）
You need to loop over it to get each nodes. 您需要遍历它以获取每个节点。
Or better, access the node you want using querySelector : 或querySelector使用querySelector访问所需的节点：
var container = document.querySelector(".container"); var box = document.getElementsByClassName("box"); for(var i = 0; i < box.length; i++){ var button = box[i].querySelector('button'); button.addEventListener("click", function(){ console.log('hello world') }) }
.container { border: 1px solid black; padding: 10px; } .box { width: 100px; height: 100px; background: red; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> </div> </body> </html>
解决方案3
1 2018-03-14 10:18:32
If you use querySelectorAll you can simplify that a lot. 如果使用querySelectorAll ，则可以简化很多工作。
querySelectorAll takes a CSS selector as a parameter and makes it very easy to narrow the nodelist down to just the elements you want, eg the button 's. querySelectorAll将CSS选择器作为参数，可以很容易地将节点列表缩小为仅所需的元素，例如button 。
Stack snippet 堆栈片段
var buttons = document.querySelectorAll(".container .box button"); for(var i = 0; i < buttons.length; i++){ buttons[i].addEventListener("click", function(){ console.log('hello world') }) }
.container { border: 1px solid black; padding: 10px; } .box { width: 100px; height: 100px; background: red; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> </div> </body> </html>
Or like this, using the btn class 或者像这样，使用btn类
Stack snippet 堆栈片段
var buttons = document.querySelectorAll(".container .btn"); for(var i = 0; i < buttons.length; i++){ buttons[i].addEventListener("click", function(){ console.log('hello world') }) }
.container { border: 1px solid black; padding: 10px; } .box { width: 100px; height: 100px; background: red; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> <div class="box"> <button class="btn">click me</button> </div> </div> </body> </html>
解决方案4
0 2018-03-14 10:29:01
children method returns an array of matching elements, you have to specify to which element you want to addEventListened, even if it's one child you need to indicate x[0].addEventListener() children方法返回匹配元素的数组，您必须指定要添加到EventListened的元素，即使它是一个孩子也需要指示x[0].addEventListener()
That suppose to work for any amount of children inside: 这样可以为内部的任何儿童工作：
var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");
for(var i = 0; i < box.length; i++){
var x = box[i].children;
for (let i=0; i < x.length; i++) {
x[i].addEventListener("click", function(){
console.log('hello world')
})
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.