forループを使用して生成されたget id要素

Question

こんにちは私は、ループで生成されたIDを使用して特定のdivをリロードする方法をforループを使用してdiv IDを生成するhtmlページを持っています。ここに私のhtmlコードはそう

{% for list in metrics_stats['metrics_list'] %} 
      <div class="chart-row row" id="{{list[0]}}_parent metrics"> 

       <div class="chart-user col-sm-3" id="{{list[0]}}_user"> 
        <div class="col-sm-12"> 
         <h4 class="chart-title " id="{{list[8]}}_title"> 
          <form>Per User: &nbsp; 
           <select class = "action-btn " id="inputDays"> 
            <option value="{{list[8]}}">120 days</option> 
            <option value="{{list[7]}}">60 days</option> 
           </select> 
           <br><br> 
           <noscript><input type="submit" value="Submit"></noscript> 
          </form> 
          <p id="daysInputForm"></p> 
         </h4> 
        </div> 
        <div class="col-sm-12"> 
         <div class="chart chart-pie" id="{{list[8]}}"></div> 
        </div> 
       </div> 
      </div> 
    {% endfor %} 

、IDとその下のdivは=「{{リストは、[8]}}」私はせずにこれを達成する方法をリロードする必要があり、ユーザが値60でオプションを選択するたびにありますページ全体をリロードする ありがとう

Answer 1

私のデザインパターンは、要素の機能をタグ付けするためにクラスを使用することです。あなたのケースでは、代わりにid = {{list [8]}}を使用すると、私はclass = "chart chart-pie js-chart"でグラフを識別します。私は相対選択DOMの関係を使用して、このオプションを選択したときにこのクラスを見つけるでしょう。私の命名規則は、$プレフィックスを持つjquery dom要素を開始することで、$（var）でラップする必要もないことがわかります。

ので、私のjQueryのようなものになります。私はそれはあなたのチャートのdivを再ロードするのにかかるどのような非常にわからないよう

$('.action-btn').change(function(e) { 
    var $pdiv = $(this).parents('.chart-user'); 
    var $chart = $pdiv.find('.js-chart'); 
    .. use chart now to do your reload behavior here 
}); 

を、私はあなたがより多くの情報を提供して、これを編集して喜んでいると思います。