如何通过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"的值以匹配.contator元素中元素.resource_sec的索引？例如，第三个.resource_sec元素的"data-sec_number"值将始终为3。我还有一个名为.sec_number的.resource_sec的子元素，它具有应该镜像父元素的相同数据属性。

我一直在尝试使用的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)

然后，根据Jquery文档：，可以通过将新元素索引传递给index方法来获取新元素索引

如果对元素集合调用.index((，并传入DOM元素或jQuery对象，.index(将返回一个整数，指示所传递元素相对于原始集合的位置。

var index = container.index(newElement)

将索引附加到新元素属性：

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