JavaScript

jQueryのcloneを使ってリスト（li）タグの複製と末尾追加を行う方法

  /

今回は、jQueryのcloneメソッドを使って、リスト（li）タグの1番目の要素を複製し、リストの末尾に追加する方法について詳しく解説します。
この記事を通じて、簡単に理解できるよう、丁寧にステップバイステップで説明します。

Contents

CSSの準備

まずは、リスト（#iList li）のスタイルを設定するためのCSSコードを用意しましょう。以下のCSSコードは、リストの見た目を整えるためのものです。

<style type="text/css">
<!--
#idWrap{
	width:800px;
	margin:0 auto;
}
#iList{
	width:160px;
	text-align:left;
	margin:0 auto;
}
#iList ul{
	margin:0;
	padding:0;
}
#iList li {
	list-style-position:inside;
	list-style-type:none;
	border-bottom:dotted 1px #000000;
	padding:10px;
}
#iList li a{
	text-decoration:none;
	color:#000000;
}
#iList li a:hover{
	text-decoration:none;
	color:#999999;
}
-->
</style>

　
このCSSコードは、リストの外観を設定するためのもので、#idWrapと#iListにスタイルを適用しています。#iList ulのスタイルは、リストのマージンとパディングをリセットし、#iList liのスタイルはリスト項目にボーダーとパディングを追加しています。また、リンクのスタイルも設定しています。

JavaScriptでリスト項目を複製する

次に、jQueryを使ってリストの1番目の要素を複製し、リストの末尾に追加するJavaScriptコードを用意します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var liclone = $('#iList ul li:first').clone(false);
	$('#iList ul').append(liclone);
});
</script>

　
このJavaScriptコードは、ページが読み込まれた後に実行されます。$(‘#iList ul li:first’)はリストの1番目のli要素を選択し、clone(false)メソッドを使ってその要素を複製します。複製された要素は変数licloneに格納され、その後、appendメソッドを使ってリストの末尾に追加されます。

HTMLの準備

最後に、実際にリストの要素を複製するためのHTMLコードを用意します。以下のHTMLコードは、リストの初期状態を定義しています。

<div id="idWrap">

<h1>HTMLタグで記述している初めのリスト（li）タグ「DAD UNION」を複製（clone）して末尾に追加します。</h1>



<div id="iList">

<ul>

 	<li>
					<a href="https://dad-union.com/">DAD UNION</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/69">jQueryを使って複数画像をフェードインフェードアウトで切替表示</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/63">iscroll.js：スマホサイトで上下固定バーを実装してみる</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/75">マウスオーバー・アウトで画像サイズを伸縮表示して見る</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/60">jquery.jscrollpane.min.js：スクロールバーをカスタムするjs</a>
</li>


 	<li>
					<a href="https://dad-union.com/javascript/57">getJSONでjson形式の配列情報を取得表示する方法</a>
</li>

</ul>

</div>
<!--/iList-->
</div>

　
このHTMLコードは、idWrapというIDを持つdivタグの中に、リストを表示するためのiListというIDを持つdivタグを配置しています。その中にulタグといくつかのliタグを含んでいます。各liタグには、リンクが設定されています。

jQueryのcloneを使って初めのリスト（li）タグを複製（クローン）し、最後のリストに追加表示するデモページ

上記のコードを実行すると、リストの1番目の要素である「DAD UNION」が複製され、リストの末尾に追加されます。以下のリンクからデモページを確認できます。

jQueryのcloneを使って初めのリスト（li）タグを複製（クローン）し、最後のリストに追加表示するデモ

まとめ

この記事では、jQueryのcloneメソッドを使って、リストの1番目の要素を複製し、リストの末尾に追加する方法を紹介しました。この方法を使うことで、動的にリストを操作することができ、ユーザーによりリッチな体験を提供することができます。

ぜひ、今回紹介した方法を試してみて、あなたのプロジェクトに役立ててください。さらに、cloneメソッドの活用例として、複製元の要素を削除して別の場所に複製した要素を表示するなど、様々な応用が可能です。創造力を発揮して、より魅力的なWebサイトを作り上げてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

li リストタグ clone クローン
関連記事