在数组中除此元素之外的所有元素上设置数据属性

Question

这是我的标记

<div class="parent">
  <img data-position="1" src="">
  <img data-position="2" src="">
  <img data-position="3" src="">
  <img data-position="4" src="">
</div>

单击任何img元素时，被单击的元素需要将其data-position设置为1，其余元素应跟在data-position="2"之后，依此类推。为此，我无法追加或重新排列元素，因为这将无效。

这是我尝试过的。我想，为什么不让所有这些not(this)元素通过循环并分配数据属性。

var img = $('img')
img.on('click', function() {
    var otherElements = img.not(this).length;
    console.log(otherElements)
});

这段代码第一次正确运行，但是第二次点击我得到了不同的结果。

Answer 1

您可以像原始显示的那样进行not(this)，然后更新它们上的数据位置。然后将单击的那一刻的数据位置更新为1。

Answer 2

查看此小提琴：https://jsfiddle.net/yam1hox6/1/

Answer 3

我的解决方案涉及在父级上设置事件侦听器，以便更轻松地查询和操作其子级。单击的目标之前的元素将“包装”并从数组中最后一个元素的左边继续编号。