JavaScript 訪問 forEach 循環中的子元素

Question

我剛開始使用 JavaScript 雖然我以前使用過許多其他語言。 我發現這個方向非常痛苦，我很感激有關如何在 forEach 循環（或 jQuery.each 循環）中訪問子元素的一些指導。 在這個階段，我並不關心解決方案是 JS 還是 jQuery，我只是想得到一些可行的東西。

假設我有一個使用 jQuery 找到的節點元素，現在我需要對每一行進行一些處理，其中包括需要找到一個子元素，其 id 包含與相關父節點相關的索引：

$('.row').each((index, item) => {
    var name = item.getElementById(`#name-${index}`);
});

似乎使用 getElementById 對 select 元素應該是直截了當的，但這會導致“item.getElementById 不是函數”錯誤。

我還嘗試了 jQuery 方法：

var name = item.find('#name-0')

這會出現“item.find 不是函數”錯誤。

我不知道 item 是否應該在 {} 中 - 我不清楚何時需要大括號以及何時不需要，但如果我嘗試使用大括號，我仍然會收到“.find is not a function”錯誤.

有人可以指出我做錯了什么，或者更好地指出我在某個地方的正確方向，這是記錄在案的地方。 我能找到的只是非常簡單的例子。

編輯以包含最小的 HTML 示例：（並修改以修復丟失的 div 標簽）

<div id="container" class="position-relative col-10>

    <div id="row-0" class="row position-relative">
        <div id="name-0" class="column col-4">User 1</div>
        <div id="score-0" class="column col-2">20</div>
    </div>

    <div id="row-1" class="row position-relative">
        <div id="name-1" class="column col-4">User 2</div>
        <div id="score-1" class="column col-2">10</div>
    </div>

    <div id="row-2" class="row position-relative">
        <div id="name-2" class="column col-4 ">User 3</div>
        <div id="score-2" class="column col-2">5</div>
    </div>

</div>

Answer 1

由於您沒有向我們提供標記，因此我假設您的標記如下所示：

HTML

<div class="parent">
  <div class="child">
      <div class="child_child">
        
      </div>
  </div>
  <div class="child">
      <div class="child_child">
        
      </div>
  </div>
</div>
<div class="parent">
  <div class="child1">
      <div class="child_child">
        
      </div>
  </div>
  <div class="child2">
      <div class="child_child">
        
      </div>
  </div>
  
</div>
<div class="parent">
  <div>
      <div class="child_child">
        
      </div>
  </div>
</div>

JS

let parent = document.querySelectorAll('.parent');
parent.forEach((child , index)=>{
    console.log(child.querySelector('.child_child') , index)
})

Answer 2

從為什么 getElementById 對文檔元素內的元素不起作用？ ：

容器 ID 應該是唯一的，因此沒有理由在另一個容器中通過 ID 找到 object。 這就是為什么您只需要document.getElementById即可通過其 ID 訪問任何元素，而當您通過 class 或標簽名稱搜索時，您可能只想在特定容器內搜索，這就是您可以執行x.getElementsByClassName等的原因。

因此item上沒有可用的getElementById 。

建議使用常規document.getElementById 、 document.querySelector或額外的Jquery選擇器，如下所示：

 $('.row').each((index, item) => { // getElementById var name = document.getElementById(`name-${index}`); console.log(name.textContent); // Jquery var name2 = $(`#name-${index}`)[0]; console.log(name2.textContent); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='row'> <em id='name-0'>Name 0</em> <em id='name-1'>Name 1</em> </div>

注意； 以上只是一個例子，因為OP 還沒有添加一個例子html，我已經創建了一個簡單的例子。

Answer 3

<!DOCTYPE html>
<html>
    <body>
        <div id="row">  `This is a parent div and inside there are 4 children`
            <input />
            <input />
            <input />
            <input />
        </div>
        <button type="button" id="button">Click</button>
        <div id="result"></div>
    </body>
</html>
<script>
    var row = document.getElementById("row");     `get the element into a veriable.`
    var button = document.getElementById("button");
    var result = document.getElementById("result");
    var childNodes = row.childNodes;   `Using .childNodes you will get the children of a parent div.`

    button.addEventListener("click", () => {
    let x = 0;
    childNodes.forEach(function (item) {
         x += item;
    });
    result.innerHTML = x;
    });
</script>

JavaScript 訪問 forEach 循環中的子元素

問題描述

3 個解決方案

解決方案1
0 2021-06-14 12:47:18

解決方案2
0 已采納 2021-06-14 12:49:06

解決方案3
0 2021-06-14 13:44:25

JavaScript 訪問 forEach 循環中的子元素

問題描述

3 個解決方案

解決方案1 0 2021-06-14 12:47:18

解決方案2 0 已采納 2021-06-14 12:49:06

解決方案3 0 2021-06-14 13:44:25

解決方案1
0 2021-06-14 12:47:18

解決方案2
0 已采納 2021-06-14 12:49:06

解決方案3
0 2021-06-14 13:44:25