通过getElementsByClassName JavaScript查找列表的匹配实例

Question

我想检查列表值，在实例化匹配值的情况下，我想交换元素名称。 我正在尝试以这种方式进行操作，但无法正常工作。

 <!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>

Answer 1

您需要这样做，在这里：

从document.getElementsByClassName("a")[0];删除[0] document.getElementsByClassName("a")[0];
从(x.getElementsByClassName("a")[i].innerHTML删除.getElementsByClassName("a")

这将首先允许您遍历所有a ，然后使用x[i].innerHTML测试其内容。

堆栈片段

 <!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>

如果你想获得只有a那就是后人aa ，尝试用querySelectorAll()

堆栈片段

 <!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>

如果使用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>

Answer 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 = document.getElementsByClassName("a"); for (var i = 0; i < y.length; ++i) { if (y[i].innerHTML == "a" ) { y[i].innerHTML = "Hello World!"; } } } } </script> </body> </html>

通过getElementsByClassName JavaScript查找列表的匹配实例

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-04-18 18:39:16

解决方案2
0 2018-04-18 18:48:19

通过getElementsByClassName JavaScript查找列表的匹配实例

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-04-18 18:39:16

解决方案2 0 2018-04-18 18:48:19

解决方案1
1 已采纳 2018-04-18 18:39:16

解决方案2
0 2018-04-18 18:48:19