Adding a
every second list item?

Question

I have a list in which I need to had a break for every two elements:

Original:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Need:

<ul>
<li></li>
<li></li>
</br>
<li></li>
<li></li>
</ul>

Fiddle: http://jsfiddle.net/9uksT/

Is this possible with Jquery?

EDIT: Oh wow sorry for the question. I am also open to using CSS. I just need to have a space between every 2 pairs of list items

That's invalid HTML... The `
` tag is not a closing tag, and `
` can only contain `
`, not `
`. — rid, Jan 24 '14 at 15:45
Your title says every second item, but your description says every two elements, these are different things. Please clarify. Not my downvote btw — timo, Jan 24 '14 at 15:45
Yes, it is possible with jquery. No guarantees what the browser will do with it though. — Kevin B, Jan 24 '14 at 15:46
You'd be better off giving the second list item a class with a margin-bottom. — timo, Jan 24 '14 at 15:47
Why don't you add a CSS style to set the margin (or padding) you need? — Denis C de Azevedo, Jan 24 '14 at 15:47
I would say something like this works: $("li:nth-child(3n+1)").css("margin-bottom", "10"); — Muleskinner, Jan 24 '14 at 15:48
Add a `li` with a `br` element http://jsfiddle.net/arunpjohny/Bm9rH/1/ — Arun P Johny, Jan 24 '14 at 15:48
or use a margin-bottom http://jsfiddle.net/arunpjohny/Bm9rH/2/ - ie < 9 not supported — Arun P Johny, Jan 24 '14 at 15:49
+1 as the downvotes are a little harsh when the overall aim was valid, even if the specific suggestion of BRs between LIs was invalid. — iCollect.it Ltd, Jan 24 '14 at 15:53
Yea, I'm completely up for using CSS, I just thought I needed a break, sorry I didn't know better? — Batman, Jan 24 '14 at 15:57

Blazemonger · Accepted Answer · 2014-01-24T15:55:28.023

3

Don't abuse <br> tags this way. Give every second element a wider bottom margin using CSS:

.root ul li:nth-child(2n) {
    margin-bottom: 1em;
}

http://jsfiddle.net/mblase75/9uksT/3/

That said, I would replace your <ul> sub-list with a definition list, which is more semantically correct in this case:

.root dl {
    margin: 0 0 0 2em;
}
.root dl dd {
    margin-bottom: 1em;
}

http://jsfiddle.net/mblase75/E7gAA/

edited Jan 24 '14 at 15:55

answered Jan 24 '14 at 15:49

Blazemonger

90,923
26
142
180

1

[But only use this in CSS if you're targeting IE >= 9.](http://caniuse.com/#search=nth-child) – rid Jan 24 '14 at 15:50
1

@rid [There are solutions for that](http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-to-support-nth-child-css-element). – Blazemonger Jan 24 '14 at 15:54
Thanks. I don't know what was so unclear about my question but thanks for your help. – Batman Jan 24 '14 at 20:44

iCollect.it Ltd · Answer 2 · 2014-01-24T15:56:49.557

As described that would be invalid HTML, but you can add <br/>  inside the end of every second <li> element

http://jsfiddle.net/TrueBlueAussie/9uksT/2/

$('ul:not(.root) li:odd').append("<br/>&nbsp;");

Update:

As the question has now changed, to include CSS, I would not do it this way, but would use a selector to set a style on the LIs (as Arun P Johny shows). e.g.

$('ul:not(.root) li:odd').addClass('second')

This works on all browsers.

score 0 · Answer 3 · answered Jan 24 '14 at 15:51

You can use a class and jQuery to assign the class to the right elements

.menu-vertical li.even{
    margin-bottom: 10px;
}

then

$('.menu-vertical > ul li:nth-child(2n)').addClass('even')

Demo: Fiddle

Note: As I shown in the comments it can be done using nth-child selector, but it is not supported by IE < 9

Adding a every second list item?

3 Answers3

Update:

Adding a
every second list item?