Link to home
Start Free TrialLog in
Avatar of Pedro Chagas
Pedro ChagasFlag for Portugal

asked on

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
Avatar of Gary
Gary
Flag of Ireland image

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

Open in new window

Avatar of Pedro Chagas

ASKER

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:User generated imageIn 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?
I will test your last solution. which will now be so:
$(".articles a").each(function(){
    $(this).after("<br><br>")
})

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you @Gary for the solution.
Thank you @Albert Van Halen for the great idea.