创建具有不同内容的多个div

Question

问题是当重复多个div但具有不同的数据类型时，它仍然运行相同的内容，我想要正确的所有div将具有不同的数据类型之后的不同内容。

有办法做到这一点吗？

＆＃13;

＆＃13;

$(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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码中的问题是您没有在div内循环。您必须在所有.each()

内循环时使用elements函数

$(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

可能你正在寻找类似的东西。

＆＃13;

＆＃13;

// 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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;