jQueryを使って設定した背景色を偶数行だけに適用したい

Question

前提・実現したいこと

jQueryを使って、設定した背景色を偶数行だけ適用するようにしたいです。
※初めて質問するため聞き方に至らない点があるかもしれませんが、ご容赦ください。

発生している問題・エラーメッセージ

全ての行に背景色が適用されたままになります。

該当のソースコード

<div id="ex"></div>

$('#ex').css({'background-color':'#0f0', 'color':'#000'});
$("#ex").append("<p>1行目</p>");
$("#ex").append("<p>2行目</p>");
$("#ex").append("<p>3行目</p>");

試したこと

以下のコードを試しました。

$('p:even').removeClass('background-color');
$('p:even').removeAttr("style");

何が原因と考えられるでしょうか？
また、どのように記述すれば偶数行だけ背景色に出来るのでしょうか？

Answer 1

CSSだけで実現可能ですが、jQueryでしなければならない理由がありますか。

#ex p:nth-child(even) {
 background-color:#0f0;
 color:#000; 
}

---

以下のコードを試しました。

$('p:even').removeClass('background-color');
$('p:even').removeAttr("style");

何が原因と考えられるでしょうか？

#ex にスタイルを設定しているのに、p:even のスタイルを取り除いても無意味。
また、jQueryは存在しない要素にスタイルを設定できないので、要素を追加後にスタイルを設定する必要があります。

jQueryでしなければならない合理的な理由があるなら(想像はつきませんが)、下記のこようなコードになります。

$("#ex").append("<p>1行目</p>");
$("#ex").append("<p>2行目</p>");
$("#ex").append("<p>3行目</p>");
$('#ex p:odd').css({'background-color':'#0f0', 'color':'#000'});

Comments

[moca25]

早速のご回答ありがとうございます。
jQueryを練習したかったためその条件でお聞きしました。
CSSを使わずjQueryのみの場合はどのように記述すれば良いでしょうか。

[hatena19]

回答にコード例がありますけど、試してみました？

[moca25]

ありがとうございます。
お書きになったCSSもjQueryも2行目のみ背景色を付けることが出来ました。

せっかくご回答いただいたのに大変恐縮なのですが、こちらの質問は最後の $("#ex").append("<p>3行目</p>"); の後に書く、style設定を取り消すjQueryの記述方法を知りたい、という意図でお聞きしていました。
分かりにくい聞き方をしてしまい申し訳ありません。

[hatena19]

回答にも書きましたが、removeAttr("style"); でスタイルは取り除けますが、
#ex にスタイルを設定しておいて、何もスタイルを設定していない p:even のスタイルを取り除いても無意味です。
$("#ex").removeAttr("style"); でスタイルを取り除けますが、これはやりたいこととは違いますよね。

[moca25]

p:even の件についてはスタイルの指定方法を勘違いしておりました。ご教示ありがとうございます。
$("#ex").removeAttr("style");を使用したところ、全ての背景色が消えてしまいました。
これのスタイル指定を#ex:evenとしても同様だったのですが、idにセレクタを付けた指定はできないのでしょうか。

[hatena19]

pタグの偶数行の背景色を変更したいというのが目的ですよね。
#ex のスタイル設定では不可能です。

> idにセレクタを付けた指定はできないのでしょうか。

回答の
$('#ex p:odd').css({'background-color':'#0f0', 'color':'#000'});
で、"ex"ID内の Pタグの偶数行という指定になってます。

これがシンプルな実装法ですが、なぜこれではダメなのか合理的な理由を提示てください。

[moca25]

idとセレクタは同時に使えないのですね。ありがとうございます。

jQueryはまだ学び始めたばかりなので、実務ではなく練習を目的に書いていました。
そのためシンプルで効率の良い書き方よりも、ひとまず基本的な書き方が使えるようになることを目標としていました。
その中で上記の書き方を試したところ上手くいかなかったため質問させていただきました。
実務であまりこのような書き方はしないことは分かった上でお聞きしていたつもりでした。

[hatena19]

> idとセレクタは同時に使えないのですね。

#ex も p:odd もセレクタです。('#ex p:odd') と記述することで、'ex'IDないのPタグの偶数行という指定（セレクタ）になります。
基本用語を理解できてないですね。

> その中で上記の書き方を試したところ上手くいかなかったため質問させていただきました。

それが上手くいかない原因も、回答やコメントで何度も説明しています。
もう一度かみ砕いて説明すると、
id="ex"のブロックに背景色を設定する。
その中に Pタグが入っている。Pタグには背景色が設定されていない。これは背景が透明で親要素の背景色がそのまま見えているという状態です。
これが理解できれば、質問のコードでうまくいかない理由も理解できると思います。

[moca25]

ありがとうございます。こちらのコメントで今まで理解出来ていなかった点が解決できました。
まだまだ基本的な知識が不足していることも分かりました。
最後まで丁寧にご回答いただきありがとうございました。