しかし、オンラインストアのセクション、ブログのセクション、またはHabrのメインページ全体を作成する必要があると想像してください。 はい、ページを個別のブロックに分割し、それらのマークアップを行い、多くのネストされたブロックを生成し、それらのCSS / LESS / SCSSを作成します。 もちろん、Zen-Coding、jQuery Templates、およびグリッドを構築するためのすばらしいツールがあります。BootstrapやZurb Foundationなどのあらゆる種類のCSSフレームワークです。
しかし、リスト内の要素が1つだけでなく、リスト内に多くの要素がある場合に、リストのレイアウトがどのように動作するかを確認したいことがよくあります。 確かに、特にお気に入りのCMSまたはテンプレートエンジンを備えたWebフレームワークが手元にない場合は、あなたの人生で少なくとも一度はブロックのレイアウトをコピーして、コンテンツでページを埋めてください。 そして、コピーと貼り付けが削除されました。 さらに悪いことに、あなたはタイプセットする人からHTMLカットを取得する人の1人であり、このコピーペーストを自分で削除する必要があります。
数日前、私はライブラリpopulatejsを作成しました。このライブラリは、説明したトラブルからあなたを完全に救うように設計されています。 実際、CSSの構文糖衣を使用して、CSSプロパティを使用してHTML要素のコンテンツを複製できます。 たとえば、Webページ7の要素のクラス「populate-7」は1つではなくまったく同じ要素を表示し、クラス「populate-inner-3」は要素の内容を3回表示します。
使い方は？
たとえば、提供された商品の簡単な説明を含むアイテムのテストリストが必要です。
<ul> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> </ul>
ブロックをコピーする代わりに：
<li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>
.populate-5クラスを使用します。
<li class="populate-5"><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>
5つのアイテムのリストがページに表示されます。 2つの製品写真を含む5つのアイテムが必要ですか？ 問題ありません：
<li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>
または詳細説明テキスト：
<li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title populate-inner-3">Lorem ipsum dolor...</div></li>
レイアウトが完了したら、ライブラリ接続の行を削除すると、純粋なHTMLマークアップをテンプレートに安全に変換できます！
当然、CSSで宣言された擬似クラス：nth-childも要素に適用されます。
ライブラリを接続してすぐに使用を開始するには、jQueryの後に次のコードをページに貼り付けます。
<script type="text/javascript" src="https://rawgithub.com/vladignatyev/populate-js/master/js/populate.js"></script>
次に、内部にあるものについて話しましょう。
中身は？
populatejsの内部には非常にシンプルなエンジンがあり、セレクターにjQueryを使用し、DOMツリーを走査してCSS要素クラスの宣言を処理する独自のメカニズムを使用します（jQueryの「class」属性を使用）。 すべてのライブラリコードは、素晴らしいQUnitフレームワークを使用したテストを通じて記述されています。 テストを実行するには、ブラウザーでtest.htmlを開きます。
HTMLドキュメントがブラウザによってロードされると、初期化中に、ライブラリはクラス.populate- *および.populate-inner- *でマークされたDOMツリーのノードを見つけ、そのようなサブツリー（実際はフォレスト）のターミナルノードのリストを形成します。 この後、渡されたノードが.populatedクラスでマークされ、「クローニング」操作がそれらに適用され、これらのノードの継承者の階層全体をコピーする逆移動が発生します。
おわりに
私はコミュニティからのフィードバックを喜んでおり、このライブラリが私以外の誰かにいくつかのジェスチャーを保存してくれたら、私はすでに嬉しいでしょう。
1. Zenコーディング-HTML / CSSをより速く記述
2. jQueryテンプレートの使用
2. ブートストラップ
3. ズールブ財団
4. ライブラリPopulateJSの公式ページ
5. QUnit jsテストフレームワーク
5. GitHubソースコード
6.より多くの運用サポートが必要な場合、または「ありがとう」と言いたい場合は、 私のtwitterを使用します。
githubでフォークしてください ！