各divに毎回実際に入力することなく一意のIDを与える方法はありますか？

Question

私のコードは次のようになります。

.wrapper { 
 
    width: 140px; 
 
} 
 
.box { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    border: 1px solid #e3e3e3; 
 
    border-radius: 4px; 
 
    overflow: hidden; 
 
} 
 
.box_top { 
 
    position: relative; 
 
    display: block; 
 
    background-color: #fff; 
 
    min-height: 70px; 
 
} 
 
.box_top img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.box_content { 
 
    position: relative; 
 
    display: block; 
 
    box-sizing: border-box; 
 
    width: 100%: padding: 5px 15px; 
 
    background-color: #f4f4f4; 
 
} 
 
.box_title, 
 
.box_description, 
 
.price, 
 
.button { 
 
    position: relative; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 5px; 
 
    margin: 0; 
 
} 
 
.box_title { 
 
    font-size: 18px; 
 
} 
 
.button { 
 
    line-height: 20px; 
 
    color: #fff; 
 
    background-color: #333; 
 
    cursor: pointer; 
 
}

<div class="wrapper"> 
 
    <div class="box" id="product_1"> 
 
     <div class="box_top"> 
 
      <img src="http://oregonaitc.org/wp-content/uploads/2016/02/potato.jpg" alt="Product 1" /> 
 
     </div> 
 
     <div class="box_content"> 
 
      <a class="box_title">TITLE</a> 
 
      <p class="box_description"> 
 
       Description 
 
      </p> 
 
      <a class="price">$10</a> 
 
      <a class="button" id="product_1_add"> 
 
      Add to cart 
 
      </a> 
 
     </div> 
 
    </div> 
 
</div>

は、私は何をしたい個別に後でのjQueryを使用して、各ボックスをターゲットできるようにするために、すべての要素に一意のIDを追加することです。

などのように並べ替えます。<div class="box" id="product_1">、<div class="box" id="product_2">などです。

私のページにはこのような数多くの製品ボックスがあり、すべての要素に一意のIDを手動で追加するには多くの時間がかかります。 jQueryやPHPを使ってこの問題を解決するにはどうすればいいですか？

Answer 1

すべての製品をループしてエコーアウトしてください。
私が作った次の仮定：
1.あなたは、データベースから直接引っ張っ
2.プルは、このデータから
3.キーが「イメージ」している2次元配列の形である、「タイトル」 、「説明」と「価格」

<?php 
$productArray = array(); //The array of your product data 
for ($i=1; $i=<count($productArray); i++;){ 
echo '<div class="wrapper"> 
    <div class="box" id="product_'.$i.'"> 
    <div class="box_top"> 
     <img src="http://oregonaitc.org/wp-content/uploads/2016/02/'.$productArray[$i-1]['Image'].'" alt="Product '.$i.'" /> 
     </div> 
     <div class="box_content"> 
     <a class="box_title">'.$productArray[$i-1]['Title'].'</a> 
     <p class="box_description">   
     '.$productArray[$i-1]['Description'].' 
     </p> 
     <a class="price">'.$productArray[$i-1]['Price'].'</a> 
     <a class="button" id="product_'.$i.'_add"> 
     Add to cart 
     </a> 
    </div> 
    </div> 
</div>'; 
} 
?> 

Answer 2

あなたはおそらくあなたが正しいPHPで動的にHTMLを生成しているのID

$([selector_to_your_divs]).each(function(index) { 
    $(this).attr("id","id_prefix_"+index); 
});