How to iterate this.value in javascript

Question

I am trying to compare this.value with Drupal.settings["pis_var" + i].hasOwnProperty(j).

However, I am not able to iterate this.value. It is just comparing with first value not one by one.

Any suggestions would be appreciated.

var controllers = $("[data-drupal]");
var pis = $("[data-pis]");

var i = 0;
var controller = $(controllers[i]);
var inventory = $(pis[i]);
var index = 0;   
$(controllers[i]).each(function (index) {
  console.log(Drupal.settings["pis_var" + i]);
  console.log(this.value);
  var j=0;
  for (j in Drupal.settings["pis_var" + i])
  {

       if (Drupal.settings["pis_var" + i].hasOwnProperty(j))        
       {           
          console.log(Drupal.settings["pis_var" + i][j] + '--' + i + '--' + j + '--' + this.value);
          if (this.value !== Drupal.settings["pis_var" + i][j])
          {
              console.log(this.value + '--' + Drupal.settings["pis_var" + i][j]);
          }

       }
      }
  i++;

});

HTML code ( which is drupal code) I have derived from the page source.

    <table>
      <tbody>
        <tr>
  <td class="label">Experiment&nbsp;#:&nbsp;<span class="form-required" title="This field is required.">*</span></td>
  <td><div class="form-item" id="ExExCode-wrapper">
 <input type="text" maxlength="8" name="ExExCode" id="ExExCode" size="8" value="201914" data-drupal="pic_code" data-pis="ExExCode_pis" class="form-text required" />
</div>
</td>
</tr>

<tr>
  <td class="label">Experiment&nbsp;Name&nbsp;<span class="form-required" title="This field is required.">*</span></td>
  <td><div class="form-item" id="edit-ExName-wrapper">
 <input type="text" maxlength="60" name="ExName" id="edit-ExName" size="60" value="Seismic sliding law" data-drupal="ExName" data-pis="ExName_pis" class="form-text required" />
</div>
</td>
</tr>

<tr>
  <td class="label">Experiment&nbsp;Description&nbsp;<span class="form-required" title="This field is required.">*</span></td>
  <td><div class="form-item" id="edit-ExDesc-wrapper">
 <input type="text" maxlength="80" name="ExDesc" id="edit-ExDesc" size="80" value="Using passive seismics to determin a glacier sliding law" data-drupal="ExDesc" data-pis="ExDesc_pis" class="form-text required" />
</div>
</td>
</tr>

<tr>
  <td class="label">Sponsor</td>
  <td><div class="form-item" id="edit-ExSponsor-wrapper">
 <input type="text" maxlength="18" name="ExSponsor" id="edit-ExSponsor" size="18" value="UNIV/N/A" data-drupal="ExSponsor" data-pis="ExSponsor_pis" class="form-text" />
</div>
</td>
</tr>
<tr>
  <td class="label">Sensors</td>
  <td><div class="form-item" id="edit-types-Sensor-wrapper">
 <input type="text" maxlength="25" name="types_Sensor" id="edit-types-Sensor" size="25" value="" data-drupal="types_Sensor" data-pis="types_Sensor_pis" class="form-text" />
</div>
</td>
</tr>

<tr>
  <td class="label">Recorders</td>
  <td><div class="form-item" id="edit-types-Recorder-wrapper">
 <input type="text" maxlength="25" name="types_Recorder" id="edit-types-Recorder" size="25" value="" data-drupal="types_Recorder" data-pis="types_Recorder_pis" class="form-text" />
</div>
</td>
</tr>
<tr>
  <td class="label">Foreign?</td>
  <td><div class="form-radios"><div class="form-item" id="edit-ExDF-N-wrapper">
 <label class="option" for="edit-ExDF-N"><input type="radio" id="edit-ExDF-N" name="ExDF" value="N"   data-drupal="ExDF" data-pis="ExDF_pis" class="form-radio" /> NO</label>
</div>
<div class="form-item" id="edit-ExDF-Y-wrapper">
 <label class="option" for="edit-ExDF-Y"><input type="radio" id="edit-ExDF-Y" name="ExDF" value="Y"   data-drupal="ExDF" data-pis="ExDF_pis" class="form-radio" /> Yes</label>
</div>
</div></td>
</tr>
<tr>
  <td class="label">Billing&nbsp;Address</td>
  <td><div class="form-item" id="edit-ExBilling-wrapper">
 <textarea cols="50" rows="10" name="ExBilling" id="edit-ExBilling"  data-drupal="ExBilling" data-pis="ExBilling_pis" class="form-textarea resizable "></textarea>
</div>
<div class="textarea-identifier description">CKEditor: the ID for <a href="/admin/settings/ckeditor">excluding or including</a> this element is <em>passcal:sdb/expt/201914/pisreview.edit-ExBilling</em>.</div></td>
</tr>

Thank you in advance.

Answer 1

You're only iterating over one controller. $(controllers[i]) is evaluated when the .each() starts, so it just uses i=0, it doesn't go to the next controller when you do i++.

You should use

controllers.each(function(i) {
    ...
})

There's no need for you to increment i yourself.