通过 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]

从 (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>

如果您只想获得 aa 的后代 a，请尝试使用 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 查找列表的匹配实例

Finding matching instances of the list by getElementsByClassName JavaScript

html

javascript

arrays

getelementsbyclassname