[英]Finding matching instances of the list by getElementsByClassName JavaScript
I would like to check the list values and in the case of instanced a matching value I would like to exchange the element name. 我想检查列表值,在实例化匹配值的情况下,我想交换元素名称。 I'm trying to do it that way but it doesn't work.. 我正在尝试以这种方式进行操作,但无法正常工作。
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <div class="aa"><ul><li class="a">a</li><li class="a">b</li><li class="a">c</li></ul></div> <div class="aa"><ul><li class="a">s</li><li class="a">b</li><li class="a">c</li></ul></div> <script> function myFunction() { var x = document.getElementsByClassName("a")[0]; for (var i = 0; i < x.length; ++i) { if (x.getElementsByClassName("a")[i].innerHTML == "a") { x[i].innerHTML = "Hello World!"; alert("YO"); } } } </script> </body> </html>
You need to do like this, where you: 您需要这样做,在这里:
remove [0]
from document.getElementsByClassName("a")[0];
从document.getElementsByClassName("a")[0];
删除[0]
document.getElementsByClassName("a")[0];
remove .getElementsByClassName("a")
from (x.getElementsByClassName("a")[i].innerHTML
从(x.getElementsByClassName("a")[i].innerHTML
删除.getElementsByClassName("a")
That will first allow you to iterate through all a
, and then, with x[i].innerHTML
, test its content. 这将首先允许您遍历所有a
,然后使用x[i].innerHTML
测试其内容。
Stack snippet 堆栈片段
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <div class="aa"> <ul> <li class="a">a</li> <li class="a">b</li> <li class="a">c</li> </ul> </div> <div class="aa"> <ul> <li class="a">b</li> <li class="a">a</li> <li class="a">c</li> </ul> </div> <script> function myFunction() { var x = document.getElementsByClassName("a"); for (var i = 0; i < x.length; ++i) { if (x[i].innerHTML == "a") { x[i].innerHTML = "Hello World!"; } } } </script> </body> </html>
If you want to get only a
that is descendants of aa
, try with querySelectorAll()
如果你想获得只有a
那就是后人aa
,尝试用querySelectorAll()
Stack snippet 堆栈片段
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <div class="aa"> <ul> <li class="a">a</li> <li class="a">b</li> <li class="a">c</li> </ul> </div> <div class="aa"> <ul> <li class="a">b</li> <li class="a">a</li> <li class="a">c</li> </ul> </div> <script> function myFunction() { var x = document.querySelectorAll(".aa .a"); for (var i = 0; i < x.length; ++i) { if (x[i].innerHTML == "a") { x[i].innerHTML = "Hello World!"; } } } </script> </body> </html>
If to use getElementsByClassName()
, one need 2 loops 如果使用getElementsByClassName()
,则需要2个循环
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <div class="aa"> <ul> <li class="a">a</li> <li class="a">b</li> <li class="a">c</li> </ul> </div> <div class="aa"> <ul> <li class="a">s</li> <li class="a">a</li> <li class="a">c</li> </ul> </div> <script> function myFunction() { var x = document.getElementsByClassName("aa"); console.log(x.length); for (var i = 0; i < x.length; ++i) { var y = x[i].getElementsByClassName("a"); for (var ii = 0; ii < y.length; ++ii) { if (y[ii].innerHTML == "a" ) { y[ii].innerHTML = "Hello World!"; } } } } </script> </body> </html>
Here is a version for both dives 这是两次潜水的版本
<!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <div class="aa"> <ul> <li class="a">a</li> <li class="a">b</li> <li class="a">c</li> </ul> </div> <div class="aa"> <ul> <li class="a">s</li> <li class="a">a</li> <li class="a">c</li> </ul> </div> <script> function myFunction() { var x = document.getElementsByClassName("aa"); console.log(x.length); for (var i = 0; i < x.length; ++i) { var y = document.getElementsByClassName("a"); for (var i = 0; i < y.length; ++i) { if (y[i].innerHTML == "a" ) { y[i].innerHTML = "Hello World!"; } } } } </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.