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>

请注意那里的事件委托-这是必需的，因为否则，侦听器将对每个.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>

如何设置元素的索引

1 个答案: