【jQuery】要素を複製してclassやvalueなどの属性を書き換える

【jQuery】要素を複製してclassやvalueなどの属性を書き換える

こんにちは。
今日は、jQueryである要素を複製し、
新たに追加した要素の属性を変える方法を紹介します。

やりたいこと

変更前

<ul id="checkbox-list">
  <li><input type="checkbox" class="checkbox-1" value="1">1</li>
  <li><input type="checkbox" class="checkbox-2" value="2">2</li>
</ul>


例えば、上記のようなコードの、li要素を複製して追加し、
下記のようにclassとvalueを書き換えるようなイメージです。

変更後

<ul id="checkbox-list">
  <li><input type="checkbox" class="checkbox-1" value="1">1</li>
  <li><input type="checkbox" class="checkbox-2" value="2">2</li>
  <li><input type="checkbox" class="checkbox-3" value="3">3</li>
</ul>

実際のコード例

コードとしては、以下の通りです。

	$(function(){
		//指定した要素の一番最初の要素を複製
		$("#checkbox-list li").eq(0).clone().appendTo("#checkbox-list");

		//指定したclassの一番最後のli要素(複製した要素)の属性を変更
		$("#checkbox-list li:last input").attr("class","3");
		$("#checkbox-list li:last input").attr("value","3");
	})

処理内容

最初に要素を指定して複製し、貼り付ける先を指定します。
この例では、複製した要素はid:checkbox-listが指定されているul要素の子要素として貼り付けます。

  • $(“#checkbox-list li”) ←複製したい要素
  • .eq(0) ←指定した要素が複数あるので、一番最初の要素を対象とする
  • .clone() ←要素を複製
  • .appendTo(“#checkbox-list”) ←複製した要素を貼り付ける要素(書き換えではなく、追加になる)

次に複製した要素の属性を変更します。
「li:last」と指定している部分が大事で、
複製した要素が一番最後に追加されていることを前提にしています。

  • $(“#checkbox-list li:last input”).attr(“class”,”3″) ←追加した要素のclassを書き換え
  • $(“#checkbox-list li:last input”).attr(“value”,”3″) ←追加した要素のvalueを書き換え

使う場面

ものすごく地味ですが、配列の値をもとに要素をどんどん追加するときに、
ループさせながらこの処理を行う。というような使い方をすることがよくあります。

誰かの参考になればと思います。
では。