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

このQ&Aに関連する最新のQ&A

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で質問しましょう!

このQ&Aと関連する良く見られている質問

Qvar $i = hoge; $の意味について

初心者の質問ですみませんが教えて下さい。
jqueryのソースで以下のソースがあったのですが、
var i = ではなくvar $i にしないといけない理由ってありますか?

var $i = $( '#img' ); // 対象の img タグを選択
var img = new Image();
img.src = $i.attr('src');

Aベストアンサー

こんにちは。

$iにしなくてはいけない理由はないと思います。

多分$('#img')でjQueryのオブジェクトを取得してるので$をつけているんだと思います。
(私もjQueryで取得した要素については$を付けるようにしています)
ようするにわかりやすいようにです。

Q$("body").height();と$("body").css("

$("body").height();と$("body").css("height");の違い?

jqueryにてbodyの高さを取得し、その数値に適当な値を足すなり引くなりして、他の要素の高さとして指定するということがやりたかったので

$(function() {
var bodyheight = $("body").css("height");
var mainheight = bodyheight-230;
$("#main").css("height",mainheight);
});

とした所、bodyの高さは取得できたのですが、その後が駄目だったので

$(function() {
var bodyheight = $("body").height();
var mainheight = bodyheight-230;
$("#main").height(mainheight);
});

と変更したところ、期待通りに動きました。

この2つの違いを、どなたかお分かりになる方にご教授いただきたいです。

Aベストアンサー

#1です。ちょっと考えが足らなかった。
css('height')だと読み出しも単位付だから設定の前に演算でNGでしたね。

というか、こういう演算目的のために常にピクセル単位で読み出したり設定できるjQuery.heightやjQuery.widthが用意されているのでしょうね。

Q$(document).readyとloadの違い

■質問1
jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?
下記理解で合ってるでしょうか?

●$(document).ready(function()
・複数回実行できる
・ページを全て読み込んだ後に実行
・ページの下部に記述しなくとも良い

●$(window).load(function()
・複数回実行できない(最後の1回が実行される)
・ページ読込開始時点で実行(正確には記述位置に来た時点?)


■質問2
「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか?
・どちらも同じ?
「$(window).load(function()」V.S「window.onload = function(){」

Aベストアンサー

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する(=htmlの終了タグが読み込まれる)時に呼び出されるからページを全て読み込んだ後に実行しているように見えるのである。
> ・ページの下部に記述しなくとも良い

> ●$(window).load(function()
> ・複数回実行できない(最後の1回が実行される)
こちらも冒頭の解説の通り、window.onload = function()を何回も行うので最後の1個が有効になるのだね。
> ・ページ読込開始時点で実行(正確には記述位置に来た時点?)
いや、そんな事はない。window.onloadと同じタイミングというか登録した関数がwindows.onloadで呼び出される。なので、$("body").readyの後だ。ちなみに$("body").readyは$(document).readyよりも前に呼び出される(理由は「readyはDOMの準備が完了したら呼び出される」という意味を考えて欲しい)。

> ■質問2
> 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか?
> ・どちらも同じ?
> 「$(window).load(function()」V.S「window.onload = function(){」
違う。前者はjQueryオブジェクトにラップされるが後者はされない。

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する(=htmlの終了...続きを読む

Qjqueryについて、$("+dd",this)について教えていただけ

jqueryについて、$("+dd",this)について教えていただけませんでしょうか


【参考サイト】
http://ascii.jp/elem/000/000/498/498710/index-6.html


上記のページのアコーディオンメニューを作る記述において、


$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});





if($("+dd",this).css("display")=="none")


の部分の"+dd"に何故、+が付くのでしょうか。
確かに上記の様に記述をすると上手く動作をしますので、正しいのだと
思うのですが、そうなる理由が解らなくて混乱してしまっています。

thisが示す$("dl dt")の下層の要素を指定するための記述ならば、


if($("this dd").css("display")=="none")
として、$("dl dt")の下層にあるddという様な指定は出来ないのでしょうか。

まだ、ほとんどjqueryの記述ルールを把握していないので、お恥ずかしいのですが、
何卒、宜しくお願いいたします。

jqueryについて、$("+dd",this)について教えていただけませんでしょうか


【参考サイト】
http://ascii.jp/elem/000/000/498/498710/index-6.html


上記のページのアコーディオンメニューを作る記述において、


$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});





if($("+dd",this).css("d...続きを読む

Aベストアンサー

>thisが示す$("dl dt")の下層の要素を指定するため
ddはdtの下層ではなくdtの兄弟です
そのため隣接セレクタを使う必要があります
別の書き方をするなら
$(this).next() とか。

あと、記述ルールというか、
オブジェクトであるthisと、
文字列でしかないセレクタ
を混同してしまっているようなのでその辺りを意識してみてはどうでしょう。

Qfunctionから別のfunctionを実行したい

よろしくお願いします

今JavaScriptで
function a(){
処理A
}
function b(){
処理B
}
function c(){
処理C
処理Aをして終わり
}
と言うことをしたいのですが

function a と同じコードをcに書くのが大変なので
function cからaを呼び出して実行することができないかと考えています

検索も色々してみたのですが
これと言った答えがなかったので質問しました
よろしくお願いします。

Aベストアンサー

他の箇所から、function a()をコールするときと同様に、function c()内でfunction a()をコールすることができます。

function c()
{
処理C
a();
}


人気Q&Aランキング

おすすめ情報