Javascript jQuery-滚动到具有动态类的元素

我试图做的是：当我单击一个元素时，它将所有子元素克隆到另一个div，并滚动到我单击的div的克隆

为此，我将向单击对象的克隆添加一个类

vp

。那很好。然后我添加了以下内容以滚动到该元素：

var target = output.find(".vp");

$(".output").animate({
  scrollLeft: target.offset().left
}, 500);

但这是行不通的。在第一次单击时，它正在工作，但之后它将滚动到一个没有class

.vp

的元素

这里有一个片段。有人知道我做错了什么吗

var输出=$（“.output div”）；
$（“.wrapper div”）。单击（函数（）{
变量大小=$（“.wrapper div”）.length；
css（'width'，size*100+'vw'）；
var index=$（this.index（）+1；
output.empty（）；
$（“.wrapper div”）.each（函数（）{
$（此）.removeClass（“vp”）；
$（this.clone（）.appendTo）（输出）；
});
$（“.output div:n个子项（“+index+”）.addClass（“vp”）；
setTimeout（函数（）{
var target=output.find（“.vp”）；
$（“.output”）.animate({
scrollLeft:target.offset（）.left
}, 500);
}, 10);
});
正文{
宽度：100vw；
溢出：隐藏；
边距：0；填充：0；
}
.包装纸{
身高：100%；
宽度：100vw；
背景：无；
}
.包装部{
浮动：左；
高度：100px；
宽度：100px；
背景色：#A0；
利润率：10px；
光标：指针；
}
.产出{
字号：2em；
高度：200px；
宽度：100vw；
显示：块；
溢出-x：自动；
溢出y：隐藏；
}
.输出部门{
高度：200px；
宽度：100vw；
}
.输出分区{
位置：相对位置；
显示：块；
浮动：左；
宽度：100vw；
高度：200px；
}
副总裁{
背景色：#A0；
左：0；
}

1.
2.
3.
4.
像这样更改您的函数

    $(".output").animate({
      scrollLeft: target.width() * (index-1)
    }, 500);


var输出=$（“.output div”）；
$（“.wrapper div”）。单击（函数（）{
变量大小=$（“.wrapper div”）.length；
css（'width'，size*100+'vw'）；
var index=$（this.index（）+1；
output.empty（）；
$（“.wrapper div”）.each（函数（）{
$（此）.removeClass（“vp”）；
$（this.clone（）.appendTo）（输出）；
});
$（“.output div:n个子项（“+index+”）.addClass（“vp”）；
setTimeout（函数（）{
var target=output.find（“.vp”）；
$（“.output”）.animate({
向左滚动：target.width（）*（索引-1）
}, 500);
}, 10);
});
正文{
宽度：100vw；
溢出：隐藏；
边距：0；填充：0；
}
.包装纸{
身高：100%；
宽度：100vw；
背景：无；
}
.包装部{
浮动：左；
高度：100px；
宽度：100px；
背景色：#A0；
利润率：10px；
光标：指针；
}
.产出{
字号：2em；
高度：200px；
宽度：100vw；
显示：块；
溢出-x：自动；
溢出y：隐藏；
}
.输出部门{
高度：200px；
宽度：100vw；
}
.输出分区{
位置：相对位置；
显示：块；
浮动：左；
宽度：100vw；
高度：200px；
}
副总裁{
背景色：#A0；
左：0；
}

1.
2.
3.
4.
谢谢您的回答。它工作得很好。你知道为什么我不能使用左偏移量吗？