javascript - 如何设置元素的索引

Question

$('.title').on('click', function(){
    console.log($(this).index('.title'));
});

.title{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>

现在，如何设置被单击元素的索引，即更改其位置？

有可能是这样的吗:

$('.clicked').setIndex('.title', 3);

Answer 1

一种选择是 .remove() 单击的元素，然后找到 DOM 中当前的第三个 .title 元素，并使用 insertAfter 在其后插入单击的元素:

$(document).on('click', '.title', function(){
  const $this = $(this);
  $this.remove();
  $this.insertAfter($('.title').eq(2));
});

.title{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>

请注意此处的事件委托(delegate) - 这是必需的，因为否则监听器只会为每个 .title 工作一次。

为了说明为什么需要 .remove，请检查以下代码片段 - 尽管它使用 insertAfter($('.title').eq(2));， .eq(2) 指的是被点击的元素被删除之前的第三个元素，导致行为不一致；如果您单击第一个、第二个或第三个元素，它会根据需要放置在第三位置，而不是第四个位置。

$(document).on('click', '.title', function(){
  const $this = $(this);
  $this.insertAfter($('.title').eq(2));
});

.title{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
<div class='title'>loreme</div>
<div class='title'>loremf</div>