Find children then appendTo
Hi, I'm having an issue with finding the first child of a container then removing it from that container, and appending it to a new container. I have 3 containers with 3 elements, but they all append to the first container. I'm not sure if it's because my entire structure is poorly created, or if I'm misusing ".children". But I was wondering if anyone could give me a hand understanding what I'm doing wrong. In the end each element should shift to the next container.
http://jsfiddle.net/mmbVr/
- $(document).ready(function() {
$("#container2").click(function() {
$("#container1").fadeOut(function() {
$(this).children().detach().appendTo($("#container2"));
}).fadeIn();
$("#container2").fadeOut(function() {
$(this).children().detach().appendTo($("#container3"));
}).fadeIn();
$("#container3").fadeOut(function() {
$(this).children().detach().appendTo($("#container1"));
}).fadeIn();
});
});