遍歷 DOM 元素並動態添加數據屬性

Question

我有以下 DOM 結構，我需要在我的 h1 或 h2 標記中獲取文本（但總是第一個孩子）並將該文本值作為數據屬性添加到第二個孩子。

<div class="my-item">
    <div class="mac">
        <h1>test123</h1>
        <div>p1</div>
    </div>
</div>
<div class="my-item">
    <div class="mac">
        <h2>test456</h2>
        <div>p2</div>
    </div>
</div>

所以我在 JS 之后的 DOM 應該是這樣的：

<div class="my-item">
<div class="mac">
    <h1>test123</h1>
    <div data-head="test123">p1</div>
</div>
</div>
<div class="my-item">
<div class="mac">
    <h2>test456</h2>
    <div data-head="test456">p2</div>
</div>
</div>

我試圖通過獲取所有選擇器的列表並遍歷列表來做到這一點，但它不會添加數據屬性，而且我沒有看到任何控制台錯誤。 我相信我這樣做的方式是找不到元素：

 var items = document.querySelectorAll("div.my-item"); for (var i=0, max=items.length; i < max; i++) { var itemH = $( "div.body:first-child" ).find(items[i]); var itemP = $( "div.body:nth-child(2)" ).find(items[i]); itemP.setAttribute('data-head', itemH.text()); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="my-item"> <div class="mac"> <h1>test123</h1> <div>p1</div> </div> </div> <div class="my-item"> <div class="mac"> <h2>test456</h2> <div>p2</div> </div> </div>

Answer 1

When you use JQuery selectors, they return a JQuery wrapped set object, which is not a native object in JavaScript, so when you try to call setAttribute() on that JQuery object, you will get an error message in your developer's console.

真的，JQuery 對於這個問題來說太過分了。 如果您只是定位各個組的每個第二個子元素並遍歷它們，則可以使用dataset API更新其data-head屬性以包含該div的前一個兄弟元素的文本。

 // Get all the second child elements within the my-item groups var items = document.querySelectorAll("div.my-item > div.mac >:nth-child(2)"); // Loop over the returned node list with the Array.forEach() API // which is simpler than for loops because there's no index you // have to manage. items.forEach(function(item){ // Set data-* attribute using the dataSet API item.dataset.head = item.previousElementSibling.textContent; console.log(item); });

 <div class="my-item"> <div class="mac"> <h1>test123</h1> <div>p1</div> </div> </div> <div class="my-item"> <div class="mac"> <h2>test456</h2> <div>p2</div> </div> </div>

Answer 2

您可以使用 class .my-class直接定位 div 內的<h1>和<h2>元素，如下所示：

 $(".my-item h1, .my-item h2").each(function() { $(this).next("div").attr("data-head", $(this).text()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="my-item"> <div class="mac"> <h1>test123</h1> <div>p1</div> </div> </div> <div class="my-item"> <div class="mac"> <h2>test456</h2> <div>p2</div> </div> </div>

更新：正如評論中提到的，header 標簽不僅可以是 h1 和 h2，而且可以是 h6。 要定位所有 header 標簽，可以使用:header ：

 $(".my-item:header").each(function() { $(this).next("div").attr("data-head", $(this).text()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="my-item"> <div class="mac"> <h1>test123</h1> <div>p1</div> </div> </div> <div class="my-item"> <div class="mac"> <h2>test456</h2> <div>p2</div> </div> </div>