如何通過jQuery中的元素索引設置數據屬性值？

Question

我有多個同級元素，有些是動態添加的，有些是手動添加的或使用 JS 的。 每個都有一個“data-sec_number”的數據屬性，其數值隨着頁面下方的每個新元素增加一。 目前我正在手動編寫這些。例如

<div class="container">
<div class="row resource_sec" data-sec_number=1>
<div class="content sec_number" data-sec_number=1></div>
</div>

<div class="row resource_sec" data-sec_number=2>
<div class="content sec_number" data-sec_number=2></div>
</div>

<div class="row resource_sec" data-sec_number=3>
<div class="content sec_number" data-sec_number=3></div>
</div>
</div>

如何獲取屬性“data-sec_number”的值以匹配 .container 元素中元素 .resource_sec 的索引？ 例如，第三個 .resource_sec 元素的“data-sec_number”值始終為 3。我還有 .resource_sec 的子元素稱為 .sec_number，它具有應該反映父元素的相同數據屬性。

我一直在嘗試使用的 JS 是：

 var items = $('.container .resource_sec'); var lastItem = $('.container .resource_sec:last'); var index = items.index(lastItem); $('.resource_sec').attr('data-sec_number', index); $('.sec_number').attr('data-sec_number', index);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row resource_sec" data-sec_number=1> <div class="content sec_number" data-sec_number=1></div> </div> <div class="row resource_sec" data-sec_number=2> <div class="content sec_number" data-sec_number=2></div> </div> <div class="row resource_sec" data-sec_number=3> <div class="content sec_number" data-sec_number=3></div> </div> </div>

Answer 1

這條線的意義

$('.resource_sec').attr('data-sec_number', index);

是設置屬性值。 要選擇（查詢）特定索引，請使用：

$('.resource_sec[data-sec_number=' + index + ']')

或者

$(`.resource_sec[data-sec_number=${index}]`)

如果你支持 ES6

---

更新：

要在 jQuery 中添加新元素，您可以使用：

var container = $('.container')
var newElement = $('<div class="row resource_sec"></div>').appendTo(container)

然后，您可以通過將新元素索引傳遞給index方法來獲取新元素索引，根據 Jquery文檔：

如果在元素集合上調用 .index() 並且傳入 DOM 元素或 jQuery 對象，則 .index() 返回一個整數，指示傳遞的元素相對於原​​始集合的位置。

var index = container.index(newElement)

將索引附加到新元素屬性：

newElement.attr('data-sec_number', index)