jQueryのcloneを使って初めのリスト(li)タグを複製(クローン)し、最後のリストに追加して表示

リストタグ(li)の先頭をjQueryのclone(複製)を使用して、末尾に追加表示してみます。
1.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>
2.読み込むJsファイルとJavaScritpの記述例
<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>
3.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>
jQueryのcloneを使って初めのリスト(li)タグを複製(クローン)し、最後のリストに追加表示するデモ
タグ要素をコピー(複製)出来るところが良いですね。
remove的なことが出来ると動的に別の箇所にコピー(複製)したタグ要素を表示できそうです。
※流用される場合は自己責任でお願いします。
-
前の記事
phpを外部jsファイルとして読み込み文字を出力してみる 2019.04.24
-
次の記事
jQueryの.loadを使って別ページの指定箇所を取得表示してみる 2019.04.26