$('.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);
最佳答案
一种选择是 .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>
关于javascript - 如何设置元素的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53366326/