n番目のliタグの後に任意のタグを挿入したいです

お世話になります。

【希望】
高さの違うブロックをfloat:left;で回り込ませて、
段落ちしないように
次の段との間に横一本のborderを付けたいため
2n回目の<li>タグの終わりに

<div class="clear"></div> が自動挿入されるようにしたいです。

具体的にいうと
こちらが

という形で自動で出力されたらいいなと思っています。

【要望】
こういった任意の箇所にタグを自動挿入していく方法にはどういったものがあるでしょうか？
CSS3で任意のn番目のタグにだけclear:both;のスタイルを付けるという方法で
今まで段落ちは回避してきましたが、
今回区切り線を付けるためにどうしてもタグを挿入したいので、
こちらにて質問させていただきました。

以上、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryですかね。
CSSの:afterだと2n番目の要素の中に挿入することになってしまうので難しそうな気がします。

jQueryでやるとこんな感じです。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
5  <meta charset="utf-8">
6  <title></title>
7  <script>
8    $(function(){
9      $("li:nth-child(2n)").after('<div class="clear"></div>');
10    });
11  </script>
12</head>
13<body>
14<ul>
15  <li>ブログ</li>
16  <li>ブログ</li>
17  <li>ブログ</li>
18  <li>ブログ</li>
19  <li>ブログ</li>
20  <li>ブログ</li>
21  <li>ブログ</li>
22  <li>ブログ</li>
23  <li>ブログ</li>
24  <li>ブログ</li>
25</ul> 
26</body>
27</html>