親のインデックスが別の変数と一致する入力として変数を設定します。

Question

私はドロップダウン選択に基づいていくつかの読み取り専用テキスト入力の値を操作しようとしているWebフォームを持っています。

HTML（省略）は、基本的に次のようになります。

ページで

<fieldset class="container"> 
    <fieldset class="foo-points-fs"> 
     <div> 
      <selector id="foo-bar1-points"> 
       <option>1</option> 
       <option>2</option> 
      </selector> 
     </div> 
     <div> 
      <selector id="foo-bar2-points"> 
       <option>1</option> 
       <option>2</option> 
      </selector> 
     </div> 
    </fieldset> 
    <fieldset class="foo-weight-fs"> 
     <div> 
      <input readonly="readonly" value="1" id="foo-bar1-weight"/> 
     </div> 
     <div> 
      <input readonly="readonly" value="2" id="foo-bar2-weight"/> 
     </div> 
    </fieldset> 
    <fieldset class="foo-score-fs"> 
     <div> 
      <input readonly="readonly" value="0" id="foo-bar1-score"/> 
     </div> 
     <div> 
      <input readonly="readonly" value="0" id="foo-bar2-score"/> 
     </div> 
    </fieldset> 
</fieldset> 

、これらは基本的に、ユーザーが体重の列とから選択しますドロップダウンの列を持っているし、次のスコアテーブルの行のように見えますそれ。したがって、selector,input、およびinputの各セットは1つの行です。

.scoreフィールドセット内の入力の値を、同じ行のセレクタとウェイト入力の値に応じて変更したいとします。つまり、親divのインデックスが対応するセレクタ親divのインデックス

jQueryで、「親divのインデックスが別のセレクタ/入力の親divのインデックスと等しい入力」を設定する方法がわかりました。

jQuery('fieldset.container select[id$="-points"]').change(function() { 

    var sel = jQuery(this), 
     fs = sel.parents('fieldset[id$="-points-fs"]'), 
     dropPar = sel.parent('div'), 
     dropNdx = dropPar.index(), 
     weightInput = fs.find('input[id$="-weight]'), 
     scoreInput = fs.find('input[id$="-score"]'), 
     weight = weightInput.parent('div').index(dropNdx), // problem is here, I assume 
     score = scoreInput.parent('div').index(dropNdx); // problem is here, I assume 

    score.val(weight.val() * sel.val()); 

}); 

ヘルプをしてください：ここでは

は、私がこれまで持っている何ですか？

Answer 1

ここに作業コードがあります！

jQuery('fieldset.webform-component--rubric--part1.form-wrapper select[id$="-points"]').change(function() { 
 
\t 
 
    \t var value = $(this).val(); 
 
    var index = $(this).parent().index() + 1; 
 
    var weight = $(this).parent().parent().parent().next().find('#pid'+index+'-weight').val(); 
 
    
 
    $(this).parent().parent().parent().next().next().find('#pid'+index+'-score').val(value*weight); 
 
    
 
});

.description, select { 
 
    display: inline; 
 
} 
 
.description { 
 
    margin-right: 10px; 
 
} 
 
input[type="text"] { 
 
    width: 30px; 
 
    text-align: center; 
 
} 
 
fieldset fieldset { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<fieldset class="webform-component--rubric--part1 form-wrapper"> 
 
    <div class="fieldset-wrapper"> 
 
     <div></div> <!-- unrelated --> 
 
     <fieldset class="webform-component--rubric--part1--row-pid"> 
 
      <div class="fieldset-wrapper"> 
 
       <div></div> 
 
       <div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
        <div><div></div></div> <!-- unrelated --> 
 
       </div> 
 
       <fieldset class="webform-component--rubric--part1--row-pid--pid-points-fs"> 
 
        <div class="fieldset-wrapper"> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid1-points"> 
 
         <div class="description">1.</div> 
 
         <select id="pid1-points" name="pid1_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid2-points"> 
 
         <div class="description">2.</div> 
 
         <select id="pid2-points" name="pid2_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid3-points"> 
 
         <div class="description">3.</div> 
 
         <select id="pid3-points" name="pid3_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-points-fs--ahcp-pid4-points"> 
 
         <div class="description">4.</div> 
 
         <select id="pid4-points" name="pid4_points" class="form-select"> 
 
          <option value="0" selected="selected">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
         </select> 
 
         </div> 
 
        </div> 
 
       </fieldset> 
 
       <fieldset class="webform-component--rubric--part1--row-pid--pid-weight-fs"> 
 
        <div class="fieldset-wrapper"> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid1-weight"> 
 
          <label>1. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid1-weight" name="pid1_weight" value="1" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid2-weight"> 
 
          <label>2. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid2-weight" name="pid2_weight" value="2" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid3-weight"> 
 
          <label>3. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid3-weight" name="pid3_weight" value="2" /> 
 
         </div> 
 
         <div readonly="readonly" class="webform-component--rubric--part1--row-pid--pid-weight-fs--ahcp-pid4-weight"> 
 
          <label>4. Weight</label> 
 
          <input readonly="readonly" type="text" id="pid4-weight" name="pid4_weight" value="3" /> 
 
         </div> 
 
        </div> 
 
       </fieldset> 
 
       <fieldset class="webform-component--rubric--part1--row-pid--pid-score-fs"> 
 
        <div class="fieldset-wrapper"> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid1-score"> 
 
          <label>1. Score</label> 
 
          <input readonly="readonly" type="text" id="pid1-score" name="pid1_weight" value="0" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid2-score"> 
 
          <label>2. Score</label> 
 
          <input readonly="readonly" type="text" id="pid2-score" name="pid2_weight" value="0" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid3-score"> 
 
          <label>3. Score</label> 
 
          <input readonly="readonly" type="text" id="pid3-score" name="pid3_weight" value="0" /> 
 
         </div> 
 
         <div class="webform-component--rubric--part1--row-pid--pid-score-fs--ahcp-pid4-score"> 
 
          <label>4. Score</label> 
 
          <input readonly="readonly" type="text" id="pid4-score" name="pid4_weight" value="0" /> 
 
         </div> 
 
        </div> 
 
       </fieldset> 
 
      </div> 
 
     </fieldset> 
 
    </div> 
 
</fieldset>

Answer 2

このコードは、お使いのペンに取り組ん：

jQuery('fieldset.webform-component--rubric--part1.form-wrapper select[id$="-points"]').change(function() { 
    // get select value 
    var value = jQuery(this).val(); 
    // get select id 
    var id = jQuery(this).attr('id'); 
    // use replace to get clear digit from id 
    var num = id.replace (/[^\d.]/g, ''); 
    // build selector for wight based on num and get its value * select value 
    var score = value * jQuery('#pid'+num+'-weight').val(); 
    // build selector for score based on num and set the value 
    jQuery('#pid'+num+'-score').val(score); 
});