プロが教えるわが家の防犯対策術!

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

A 回答 (4件)

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 木が狂うかもしれません。
    • good
    • 0

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 で構文違反になりますのでご注意下さい。
    • good
    • 0

間違え訂正


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

先に


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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!