7

I have a <ul> with a number of <li> elements in it. A number of them are hidden and are added to the end of the list upon clicking with jQuery after().

However, for some reason, the elements added with after() are always a bit too close to the element they are added after.

I have made a jsbin to demonstrate here

Also, a screenshot to explain:

enter image description here

The reason for using after() instead of a simple addClass or show is because the list relies on applying styles with li:nth-child(even), so if the elements are there, but only hidden, it causes issues in the styling of the list.

Mohammad
  • 21,175
  • 15
  • 55
  • 84
waffl
  • 5,179
  • 10
  • 73
  • 123

3 Answers3

10

The answer is because the <li> elements are inline, and in your HTML are separated by a newline, which when rendered creates a space between them.

When you are programatically inserting elements, they are not separated by a newline so no space appears between them.

You can see the effect of the newline by placing all the li elements on a single line, the spacing will disappear, or by adding float:left to the li in your CSS

Demo of this effect

More reading...

SW4
  • 69,876
  • 20
  • 132
  • 137
  • 2
    Thank you, I really appreciate the link for further learning about the issue, very informative and concise. – waffl Apr 09 '14 at 12:08
2

As SW4 said. there is no spacing between the <li>

Here it works http://jsbin.com/licowaqe/4/edit the difference ist in the HTML

data-additional=" <li>Four</li> <li>Five</li> <li>Six</li>" has spaces

yunzen
  • 32,854
  • 11
  • 73
  • 106
0

easy fix would be - article

DEMO

ul#list{      
    font-size: 0;
}

ul#list li {
    font-size: 36px; /* put the font-size back */
}
Pravin W
  • 2,451
  • 1
  • 20
  • 26
  • Although note that this doesn't work on some versions of Android, if this is a concern – SW4 Apr 09 '14 at 11:06