前端奇淫技巧（一）之前端遇到需要資料遍歷的如何處理
阿新 • • 發佈：2019-01-28
前端經常會遇到需要資料遍歷的盒子，即內容結構相同的Html程式碼，很多小夥伴都是直接copy，但是很容易出現最後因為複製貼上的問題，而且如果需要修改，就要把全部刪掉，重新複製一遍，很麻煩，所以為了解決這個問題，讓我們能夠一勞永逸，於是我決定寫一個指令碼去解決這個問題。如果有小夥伴覺得這個方法可行的，大可以在自己的專案中用起來。真的可以節省很多的時間和精力。
廢話不想多說，先直接貼程式碼，程式碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雖然程式碼中我加了註釋，但我還是要來說一下程式碼的思路。這段程式碼其實最重要能想到的一步就是取copy這個類的第一個。有的人會說為什麼迴圈的時候只去修改第一個copy類，我想說，看程式碼，因為後面每次把程式碼複製完之後，為了避免死迴圈和錯誤，我們都直接把複製內容的copy類去掉了，所以去修改的時候一定去修改copy類的第一個，直到最後一個。當然這段程式碼還可以改進的地方是可以把data-num去掉，因為患了懶癌病，不想再去改了，當然關鍵在於這並不影響功能，如果影響功能的情況下一點要改的。複製程式碼</title> <style> .box{width: 100px;height: 50px;margin:30px;border:1px solid #000;float: left;} </style> </head> <body> <!-- 栗子一 --> <div class="copy" data-num="10">11111111</div> <!-- 栗子二 --> <div class="box copy" data-num="6"> <h1>我是標題，來打醬油的</h1> <div class="test"> pink pink pink </div> </div> <script src="../../js/Common/jquery.js"></script> <script> $(function(){ $('.copy').each(function(i, item) { //定義該值是為了省略後面程式的的字元數，並且取copy的第一個 var that = $('.copy').eq(0); //獲得當前copy標籤的data-num的值，即要複製的次數var num = that.attr("data-num"); //獲得包括當前節點的html程式碼 var obj = that.clone().prop("outerHTML"); //將獲得到的html程式碼中的copy字串去除，以免js出現死迴圈或錯誤迴圈，並存為變數 var newObj = obj.replace('copy', ''); for (i = 1; i < num; i++) { //在當前節點後插入html程式碼 that.after(newObj); } //移除當前節點的copy的class,避免對頁面第二個copy標籤的複製影響 that.removeClass('copy'); }); }); </script> </body> </html>