Question

我在下面的代码中包含2个单独的div Red Fruit and Green Fruit，问题是我要尝试将这2个列表都合并为一个，因此最终结果将是一个大列表，其中{ {1}}的颜色各不相同，没有标题，是否有一种简单的方法可以完成，而无需更改我的许多代码？任何帮助将不胜感激，谢谢！

half of it Red Fruit and another half Green fruits

var red = {};
var green = {};
var random = {};

var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry','Pomegranate','Rassberry'];

var key2 = "Green Fruits";
green[key2] = ['Watermelon', 'Durian', 'Avacado','Lime','Honeydew'];



     var redString = '';
     $.each(red[key], function(index) {
         redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
     });
     $('.redclass').html(redString);

     var greenString = '';
     $.each(green[key2], function(index) {
         greenString += ('<div class="pilldiv greenpill class">' + green[key2][index] + '</div>');
     });
     $('.greenclass').html(greenString);

.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.redpill {
  background-color: Pink;
  cursor:default;
}
.greenpill {
  background-color: SpringGreen;
    cursor:default;

}
 .class {
  font-family: Open Sans;
}
.center {
  display: flex;
  justify-content: center;
}
.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.top {
	margin-bottom: 20px
}
h3{
font-weight: normal;
}
.panel {
    display: table;
    height: 100%;
    width: 60%;
	background-color:white;
	border: 1px solid black;
	margin-left: auto;
    margin-right: auto;
}
.new-green-fruit{
background-color: LightBlue;
cursor:pointer;
}
.top{
margin-bottom:30px;
}

Answer 1

最简单的调整是将一个HTML字符串而不是两个单独的字符串追加（并删除另一个容器以使宽度正确）：

var red = {};
var green = {};
var random = {};

var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];

var key2 = "Green Fruits";
green[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];



var combinedString = '';
$.each(red[key], function(index) {
  combinedString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$.each(green[key2], function(index) {
  combinedString += ('<div class="pilldiv greenpill class">' + green[key2][index] + '</div>');
});
$('.redclass').html(combinedString);

.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 60%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}

.top {
  margin-bottom: 30px;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />

</head>

<body>
  <div class="panel">
    <div style="float:left;width:calc(100% - 5px);">
      <h3 class="class center">Red Fruits And Green Fruits</h3>
      <div id="redid" class="redclass wrappingflexbox top"></div>
    </div>
  </div>

</body>

</html>

将2个div列表合并为一个

1 个答案: