jqueryを使用して兄弟属性値と等しいボックスを生成する方法は？

Question

HTMLから値を入力する緑色の長方形のボックスを生成する必要があります。値は1から16のいずれかになります。 生成されたボックスは値番号と同じになります。

<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でボックスを生成するにはどうすればいいですか？ =カスタムフィールド値を生成するボックスの

Answer 1

まず、id ATTR ibuteは一意でなければなりません。代わりにclass属性を使用してください。次に、value属性はdivには無効です。代わりにdata-value属性を使用してください。

divの値をループして値に等しい値の後に新しい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>

Answer 2

番号

値1 =赤いボックス

場合、値2または3 =黄色のボックス場合

値であれば4〜16 =グリーンボックスから任意

HTML：

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