Javascript 获取变异类名的索引

我在网页上找到了一份清单

按下按钮后，系统将类从

listfuitem has auction data

更改为

listfuitem has auction data wind

我使用mutationobserver观察列表，并希望获得更改的classelement的索引

我根本不知道如何得到索引

在该网页上，您一次只能有一个

列表。我不知道如何切换它。但这在这里并不重要

下面是一个演示：


$（'.listfuittem'）。单击（函数（）{
$（this.removeClass（'listfuittem有拍卖数据'）；
$（this.addClass（'listfuittem已赢得拍卖数据'）；
});
var observerTest=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
if（mutation.attributeName==“class”）{
var attributeValue=$（mutation.target）.prop（mutation.attributeName）；
如果(
属性值。包括（“韩元”）
) {
日志（attributeValue.index）；
}
}
});
});
observerTest.observe（document.body{
属性：正确，
子树：真
});
.won{
背景：#00FF00；
}


巴拉克有拍卖数据
Lehmann
Pique
克朗
Owen
使用jQuery，您可以使用
$（mutation.target）.index（）


$（'.listfuittem'）。单击（函数（）{
$（this.addClass（'won'）；
});
var observerTest=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
console.log（“发现突变”）；
if（mutation.attributeName==“class”）{
var attributeValue=$（mutation.target）.prop（mutation.attributeName）；
if（属性价值包括（“韩元”））{
log（$（mutation.target.index（））；
}
}
});
});
//已将document.body更改为document.querySelector（'.paginated'），因此它只观察此元素（由于设置的原因包括子树），如果要使用jquery，可以使用$（'.paginated'）.get（0）。
observerTest.observe（document.querySelector（'.paginated'）{
属性：正确，
子树：真
});
//试着模仿评论中提到的时间问题，但它似乎不会触发突变观察者，这是有意义的，因为您只听属性更改。
window.setInterval（（）=>{document.queryselectoral（'.time'）.forEach（e=>e.innerText=parseInt（e.innerText）+1）}，1000）
.won{
背景：#00FF00；
}


Ballack 0s
Lehmann 0s
Pique 0s
kros 0s
0
使用
.index（）
方法获取单击的
列表项的索引
：

$('.listFUTItem.has-auction-data').index(this);

在将其添加到单击的项目之前，您还可以从任何
列表项目
中删除
.won
：

$(this).siblings().removeClass('won');

如果你想说得更具体一些：

$(this).siblings().filter('.won').removeClass('won');


$（'.listfuittem'）。单击（函数（）{
$（this.sides（）.filter（'.won'）.removeClass（'won'）；
$（this.addClass（'listfuittem已赢得拍卖数据'）；
log（$（'.listFUTItem.has auction data'）.index（this））；
});
var observerTest=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
if（mutation.attributeName==“class”）{
var attributeValue=$（mutation.target）.prop（mutation.attributeName）；
如果(
属性值。包括（“韩元”）
) {
日志（attributeValue.index）；
}
}
});
});
observerTest.observe（document.body{
属性：正确，
子树：真
});
.won{
背景：#00FF00；
}


巴拉克有拍卖数据
Lehmann
Pique
克朗
Owen
我怎样才能让它只发射一次呢？在我的网页上，它几乎是在向我发送垃圾邮件。@Felix你触发了两次日志消息，因为你先删除了两个类，然后再添加它们。您可以通过只添加赢得的类而不删除和添加其他类来改变这一点。您还可以查看
document.body
。如果只观察
.paginated
，也会减少其他元素上的触发器数量。查看我的更新片段。谢谢Mark！Idk如果我应该做一个新的职位。但是如果每个li元素都有一个类
5sec/4sec
？当时间改变时，它将一直触发。我只能观察这个“家长”的li类名吗？@Felix你能用相关代码发布一个新问题来重现你的问题吗？我想你需要听LI元素的每个突变，而不需要听子树。