Jquery last-childが奇数のとき

質問

お世話になります。Jqueryで調べても分からないことがあるので質問します。
$(document).ready(function(){
$("dl dd:last-child").after("<dd/>");
});
と書いているのですが、ddの数が奇数で終わると表示ずれをしてしまうため、
「最後の子要素が　奇数の時だけ」
.after("<dd/>")
としたいのですが、どのように指定したらいいのか分かりません！分かる方、ぜひ教えてください！

回答No.3

Chaire · ベストアンサー

Selectors Level 3 ならば：

・dt|dd 全体での奇数番目なら dl > dd:last-child:nth-child(2n+1)
・dd だけの奇数番目なら dl > dd:last-child:nth-child(2n+1)

最近のブラウザなら :nth-child、:nth-of-type に対応していますし（＝querySelectorAll で扱える＝jQuery が最初に試す）、Sizzle（querySelectorAll が失敗した際に用いられる jQuery の現セレクタエンジン）も一応は対応していたはずです。

jQuery のコールバック関数の中で何度もセレクタ解析＆マッチングさせるのは極めて非効率ですので、ズバリのセレクタを 1 つ書くか、もしくはキャッシュをフル活用しましょう。

※なお、HTML として処理させるなら NET を使わずに <dd></dd> として下さい。HTML5 のパーサは、決まった要素以外の開始タグ内の / 構文違反と見なし、無視することになっています。つまり、<dd/> は <dd> と同義です。終了タグ </dd> は省略可能ですが、開始タグ <dd> だけを途中に挿入・再パースすることで DOM 木が狂うかもしれません。

回答No.4

Chaire

No.3 訂正。
・dd だけの奇数番目なら
× dl > dd:last-child:nth-child(2n+1)
○ dl > dd:last-child:nth-of-type(2n+1)

また、今少しソースコードを見てみた所、jQuery.after(string) はいったん DocumentFragment を生成してから挿入しますので、『DOM 木が狂うかもしれません』は杞憂です。失礼しました。

ただ、繰り返しますが <dd/> は HTML5 で構文違反になりますのでご注意下さい。

回答No.2

yyr446

間違え訂正
if(!$("dl dd").length%2==0){
$("dl dd:last-child").after("<dd/>");
}
ですが、レイアウト調整のためだけに空の<dd>を
作ると誰かに怒られそうなので、
おそらくfloatさせて複数列作ってらっしゃるのでしょうから
次のように

回答No.1

yyr446

先に
$("dl dd:last-child").length
でdd要素の個数を数えておいた上でやるのではだめですか
if(!$("dl dd:last-child").length%2==0){
$("dl dd:last-child").after("<dd/>");
}