[英]Finding matching instances of the list by getElementsByClassName JavaScript
我想檢查列表值,在實例化匹配值的情況下,我想交換元素名稱。 我正在嘗試以這種方式進行操作,但無法正常工作。
<!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>
您需要這樣做,在這里:
從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>
這是兩次潛水的版本
<!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.