I have the task to create a function that adds some messages to the page and another to show them in last to first order with a jQuery slideDown() effect.

jsFiddle

jQuery("#input1").click(function()
{
 //Represents the first function to add the messages
 jQuery.each(["<div>1</div>", "<div>2</div>", "<div>3</div>"],
 function(index, item)
 {
 var jDiv =jQuery(item);
 jDiv.hide();
 jQuery(".parent").prepend(jDiv);
 });
 //represents the second function to show them.
 var jParent = jQuery(".parent");
 jParent.children().reverse().each(function()
 {
 var jThis= jQuery(this);
 jParent.queue( function()
 {
 jThis.slideDown(function()
 {
 jParent.dequeue();
 });
 
 });
 }); 
});

(reverse from this answer)

jQuery.fn.reverse = [].reverse;

This seems to be an awful bunch of code just to show them one after another. Is there any way to clean up/remove redundant code?

I have the task to create a function that adds some messages to the page and another to show them in last to first order with a jQuery slideDown() effect.

jsFiddle

jQuery("#input1").click(function()
{
 //Represents the first function to add the messages
 jQuery.each(["<div>1</div>", "<div>2</div>", "<div>3</div>"],
 function(index, item)
 {
 var jDiv =jQuery(item);
 jDiv.hide();
 jQuery(".parent").prepend(jDiv);
 });
 //represents the second function to show them.
 var jParent = jQuery(".parent");
 jParent.children().reverse().each(function()
 {
 var jThis= jQuery(this);
 jParent.queue( function()
 {
 jThis.slideDown(function()
 {
 jParent.dequeue();
 });
 
 });
 }); 
});

(reverse from this answer)

jQuery.fn.reverse = [].reverse;

This seems to be an awful bunch of code just to show them one after another. Is there any way to clean up/remove redundant code?

So I have the task to create a function that adds some messages to the page and another to show them in last to first order with a jQuery slideDown() effect.

So i came up with: (jsfiddle )

jQuery("#input1").click(function()
{
 //Represents the first function to add the messages
 jQuery.each(["<div>1</div>", "<div>2</div>", "<div>3</div>"],
 function(index, item)
 {
 var jDiv =jQuery(item);
 jDiv.hide();
 jQuery(".parent").prepend(jDiv);
 });
 //represents the second function to show them.
 var jParent = jQuery(".parent");
 jParent.children().reverse().each(function()
 {
 var jThis= jQuery(this);
 jParent.queue( function()
 {
 jThis.slideDown(function()
 {
 jParent.dequeue();
 });
 
 });
 }); 
});

(reverse from this answer)

jQuery.fn.reverse = [].reverse;

This seems to be an awful bunch of code just to show them one after another. Anyway to clean up/remove redundant code?

I have the task to create a function that adds some messages to the page and another to show them in last to first order with a jQuery slideDown() effect.

jsFiddle

jQuery("#input1").click(function()
{
 //Represents the first function to add the messages
 jQuery.each(["<div>1</div>", "<div>2</div>", "<div>3</div>"],
 function(index, item)
 {
 var jDiv =jQuery(item);
 jDiv.hide();
 jQuery(".parent").prepend(jDiv);
 });
 //represents the second function to show them.
 var jParent = jQuery(".parent");
 jParent.children().reverse().each(function()
 {
 var jThis= jQuery(this);
 jParent.queue( function()
 {
 jThis.slideDown(function()
 {
 jParent.dequeue();
 });
 
 });
 }); 
});

(reverse from this answer)

jQuery.fn.reverse = [].reverse;

This seems to be an awful bunch of code just to show them one after another. Is there any way to clean up/remove redundant code?