创建具有不同内容的多个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>