Question

I’m a jQuery newbie. Here are two code snippets that move the h1 element below the first paragraph. They do precisely the same thing.

$('p').eq(0).after(function() {
return $(this).prev();
});

and

$('p').eq(0).after( $('h1') );

Which code practice is preferable? Why?

Thanks in advance for any help.

EDIT:

Here’s the html.

<article>
<h1>Post</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    <span class=co>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>

Answer 1

The first code: select all p elements, get the first found and put after it a element returned on the callback. this on callback is referent to the selected p. So the console.log return the p element. The return return the element before the selected p. On this case, the selected p is the first Lorem ipsum. And the previous element is the h1. Then the h1 is returned and attached after() the p element.

The second code: will work similar, for this specific case. But watch out! On this case you will get all p elements and filter it, getting the first one (like first code) so you will attach after it all found h1 elements. How in your example HTML code you have only one h1 element, it not will be a problem. But if you have two or more, you will have trouble!