jQuery - insert <br> in each paragrapher

Hi E's, I need to know how I do a cycle in jQuery, and in each call I need to insert in code two br's, like <br><br>.
Initially I have this code:
<ul class="list-inline text-center articles">
    <i><a class="link_listar_artigos" href="praias-douradas-mas-ventosas">praias douradas mas ventosas</a></i>
    <i><a class="link_listar_artigos" href="grandes-ferias">grandes ferias</a></i>
    <i><a class="link_listar_artigos" href="lorem-ipsum">Lorem ipsum pt</a></i>
    <i><a class="link_listar_artigos" href="comida-marroquina">comida marroquina</a></i>
</ul>

Open in new window

and this should be the final code:
<ul class="list-inline text-center articles">
    <i><a class="link_listar_artigos" href="praias-douradas-mas-ventosas">praias douradas mas ventosas</a></i>
    <br><br>
    <i><a class="link_listar_artigos" href="grandes-ferias">grandes ferias</a></i>
    <br><br>
    <i><a class="link_listar_artigos" href="lorem-ipsum">Lorem ipsum pt</a></i>
    <br><br>
    <i><a class="link_listar_artigos" href="comida-marroquina">comida marroquina</a></i>
    <br><br>
</ul>

Open in new window

How I insert the br's in the code like above?

The best regards, JC
LVL 4
Pedro ChagasWebmasterAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Are they supposed to be LI's not I's?
0
GaryCommented:
$(".articles li").each(function(){
    $(this).after("<br><br>")
})

Open in new window

0
Pedro ChagasWebmasterAuthor Commented:
Hi @Gary, I will explain.
I create a responsive blog, where have different behaviors depending the device, but also I will create different behavior for the orientation of the device, can be portrait or landscape. In this picture, this is the behavior in landscape orientation:13-10-2014-19-12-33.pngIn this case the behavior of landscape orientation is show article name under article name, li paragrapher. But when the orientation is portrait, I'd like to put the name of articles consecutive, like no paragrapher's. Maybe have a better solution, and what I think for that objective, was, when the orientation is landscape the br's are in code, but when is portrait orientation I remove the br's.

To answer your question, yes, missing "li", that's because I try to do some experiences, and I forgot to replenish the initial code. But the with li tag, I think, I cant show the articles name in consecutive. So the new code is this one:
<ul class="list-inline text-center articles">
    <a class="link_listar_artigos" href="praias-douradas-mas-ventosas"><i>praias douradas mas ventosas</i></a>
    <br><br>
    <a class="link_listar_artigos" href="grandes-ferias"><i>grandes ferias</i></a>
    <br><br>
    <a class="link_listar_artigos" href="lorem-ipsum"><i>Lorem ipsum pt</i></a>
    <br><br>
    <a class="link_listar_artigos" href="comida-marroquina"><i>comida marroquina</i></a>
    <br><br>
</ul>

Open in new window

What is the best solution for my case?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Pedro ChagasWebmasterAuthor Commented:
I will test your last solution. which will now be so:
$(".articles a").each(function(){
    $(this).after("<br><br>")
})

Open in new window

0
GaryCommented:
Change the UL to a div

http://jsfiddle.net/beez1xqp/1/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Albert Van HalenAnalyst developerCommented:
Consider css media queries.
Have a look here: http://jsfiddle.net/m01gtjw0/

In order to see how it behaves you can resize the screen.
Perhaps it's not what you want exactly but it illustrates the use and power of media queries.
You just have to create the rules for different modes.
0
Pedro ChagasWebmasterAuthor Commented:
Thank you @Gary for the solution.
Thank you @Albert Van Halen for the great idea.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.