創建具有不同內容的多個div

Question

問題是當重復多個div但具有不同的數據類型時，它仍運行相同的內容，我想正確的是所有div在遵循不同的數據類型后將具有不同的內容。

有沒有辦法做到這一點？

 $(function() { // document 'use strict'; var cp = $('div.box'); // unique id var idCp = 0; for (var i = 0; i < cp.length; i++) { idCp++; cp[i].id = "cp_" + idCp; } // diffrent type if (cp.data('type') == "c1") { cp.addClass('red').css({ "background: 'red', "padding": "20px", "display": "table" }); $('.box').append('<div class="cp-title">' + 'c1-title' + '</div>'); } else if (cp.data('type') == "c2") { cp.addClass('green').css({ "background": 'green', "padding": "20px", "display": "table" }); $('.box').append('<div class="cp-title">' + 'c2-title' + '</div>'); } else { return false; } }); //end 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <! it should be like this> <div class="box" data-type="c1" id="cp_1"> <div class="cp-title">c1 title</div> </div> <div class="box" data-type="c2" id="cp_2"> <div class="cp-title">c2 title</div> </div> <! currently wrong output> <div class="box" data-type="c1" id="cp_1"> <div class="cp-title">c1 title</div> </div> <div class="box" data-type="c2" id="cp_2"> <div class="cp-title">c1 title</div> </div> 

Answer 1

代碼中的問題是您沒有在div內循環。 在循環所有elements必須使用.each()函數

 $(function() { var cp = $('div.box'); cp.each(function() { var _cp = $(this); var text = _cp.attr("data-type") + "-title"; //Generate the text dynamically var cls = _cp.attr("data-class"); //Get the class dynamically _cp.addClass(cls).append('<div class="cp-title">' + text + '</div>'); //Add the class and append the text to the parent div }); }); //end 

 .box{ padding: 20px; display: table; } .red{ background: red; } .green{ background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box" data-type="c1" data-class="red"></div> <div class="box" data-type="c2" data-class="green"></div> 

Answer 2

可能您正在搜索類似的內容。

 // document.ready $(function() { 'use strict'; $('.box').each(function(i,elem){ var ref = +$(elem).attr("data-type").match(/\\d/)[0], addClass = 'default'; switch(true) { case ref === 1: addClass = 'red'; break; case ref === 2: addClass = 'green'; break; } $(this) .addClass(addClass) .append('<div class="cp-title">c'+ref+' title</div>'); }); }); //end 

 .red{ background: red; padding: 20px; display: table; }.green{ background: green; padding: 20px; display: table; }.default { background: #2d2d2d; color: #f6f6f6; padding: 20px; display: table; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box" data-type="c1"></div><div class="box" data-type="c2"></div>