jQuery - scroll to element with dynamic class

Question

What I am trying to do is the following: When I click an element, it clones all children to another div and scrolls to the clone of the div I clicked.

For that I am adding a class vp to the clone of the clicked object. That works fine. Then I added this to scroll to that element:

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

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

But that isn't working. On the first click, it's working, but afterwards it's scrolling to an element that hasn't class .vp .

Here's a snippet. Does anyone know what I did wrong?

 var output = $(".output div"); $(".wrapper div").click(function(){ var size = $(".wrapper div").length; output.css('width', size * 100 + 'vw'); var index = $(this).index() + 1; output.empty(); $(".wrapper div").each(function(){ $(this).removeClass("vp"); $(this).clone().appendTo(output); }); $(".output div div:nth-child(" + index + ")").addClass("vp"); setTimeout(function(){ var target = output.find(".vp"); $(".output").animate({ scrollLeft: target.offset().left }, 500); }, 10); }); 

 body{ width:100vw; overflow:hidden; margin:0;padding:0; } .wrapper{ height:100%; width:100vw; background:none; } .wrapper div{ float:left; height:100px; width:100px; background-color: #a0a0a0; margin:10px; cursor:pointer; } .output{ font-size:2em; height:200px; width:100vw; display:block; overflow-x:auto; overflow-y:hidden; } .output div{ height:200px; width:100vw; } .output div div{ position:relative; display:block; float:left; width:100vw; height:200px; } .vp{ background-color:#a0a0a0; left:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="output"> <div></div> </div> 

Answer 1

change your function like this

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

 var output = $(".output div"); $(".wrapper div").click(function(){ var size = $(".wrapper div").length; output.css('width', size * 100 + 'vw'); var index = $(this).index() + 1; output.empty(); $(".wrapper div").each(function(){ $(this).removeClass("vp"); $(this).clone().appendTo(output); }); $(".output div div:nth-child(" + index + ")").addClass("vp"); setTimeout(function(){ var target = output.find(".vp"); $(".output").animate({ scrollLeft: target.width() * (index-1) }, 500); }, 10); }); 

 body{ width:100vw; overflow:hidden; margin:0;padding:0; } .wrapper{ height:100%; width:100vw; background:none; } .wrapper div{ float:left; height:100px; width:100px; background-color: #a0a0a0; margin:10px; cursor:pointer; } .output{ font-size:2em; height:200px; width:100vw; display:block; overflow-x:auto; overflow-y:hidden; } .output div{ height:200px; width:100vw; } .output div div{ position:relative; display:block; float:left; width:100vw; height:200px; } .vp{ background-color:#a0a0a0; left:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="output"> <div></div> </div>