如何使用jquery生成等于兄弟属性值的框？答案

【问题标题】：How to generate box equal to sibling attribute value using jquery?如何使用jquery生成等于兄弟属性值的框？
【发布时间】：2017-01-22 11:35:54
【问题描述】：

我需要从 HTML 中生成绿色矩形框。值将是 1 到 16 之间的任何值。生成的框将等于值 number。

<div id="box" value="2"> </div>    <!-- 2 green  box -->
<div id="box" value="5"> </div>    <!-- 5 green  box -->
<div id="box" value="14"> </div>   <!-- 14 green  box -->
<div id="box" value="10"> </div>   <!-- 10 green  box -->

如何用 jquery 和 css 生成盒子？？

【问题讨论】：

这个问题读起来像一个“TODO”而不是一个问题。如果你添加你尝试过的东西，分享你已经拥有的 jQuery 和 CSS，并具体说明你卡在哪里，这会有所帮助。
随机生成的值？
@Mohammad 不是随机的
显示你想要的html结果
它将是简单的绿色框。没有别的

标签： javascript jquery html loops

【解决方案1】：

首先，id 属性应该是唯一的。请改用class 属性。其次，value 属性对 div 无效。请改用data-value 属性。

您需要循环遍历 div has value 并在它等于它的 value 之后创建新的 div。 .after() 在选择器后插入 html。

$(".box").each(function(){
  var value = parseInt($(this).data("value"));
  for (var i = 0; i < value; i++)
    $(this).after("<div class='green'></div>");
});

.green{
  height: 10px;
  background: green;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-value="2">2</div>
<div class="box" data-value="5">5</div>
<div class="box" data-value="14">14</div>
<div class="box" data-value="10">10</div>

【讨论】：

如果颜色可以这样的话，请帮忙？？ if value 1 = RED box , value 2 or 3 = Yellow boxes , if value any from 4 to 16 = Green boxes '

【解决方案2】：

要生成的框数 = 自定义字段值

如果值 1 = 红色框

如果值 2 或 3 = 黄色框

如果值从 4 到 16 = 绿色框

HTML：

<div id="box"> 
     <?php echo get_post_meta( get_the_ID(), 'box', true );?> 
</div>

【讨论】：

我意识到您只是想提供帮助，但用 PHP 回答问题并不是很有帮助，因为该问题已被标记为 jquery。如果 OP 无权访问服务器端代码怎么办？
我不是提出问题的用户。您可以在问题正文下方看到直接使用的标签。
@Mahbub_CSE_BD 请分享我需要