Increment inside .each() function not working-CodePudding

I'm trying to add an unique id attribute with incremented value number to all radio buttons and also for attribute to all labels. This is not working:

$(document).ready(function() {
    var i = 0;

    $('.wpcf7-radio .wpcf7-list-item').each(function() {
        i  ;

        $('.wpcf7-radio .wpcf7-list-item input').attr('id', 'radio-'   i);
        $('.wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label').attr('for', 'radio-'   i);                    
    });
});

This is output HTML:

<span >
    <span >
        <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
        <label  for="radio-5">Nový projekt</label>
    </span>

    <span >
        <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu" id="radio-5" />
        <label  for="radio-5">Redizajn</label>
    </span>

    <span >
        <input type="radio" name="moznost-typ-projektu" value="Niečo iné" id="radio-5" />
        <label  for="radio-5">Niečo iné</label>
    </span>
</span>

CodePudding user response：

You can try it :

$(document).ready(function() {
    var i = 0;

    $('.wpcf7-radio .wpcf7-list-item').each(function() {
        i  ;
        $(this).find('input').attr('id', 'radio-'   i);
        $(this).find('label').attr('for', 'radio-'   i);                    
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span >
    <span >
        <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
        <label  for="radio-5">Nový projekt</label>
    </span>

    <span >
        <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu" id="radio-5" />
        <label  for="radio-5">Redizajn</label>
    </span>

    <span >
        <input type="radio" name="moznost-typ-projektu" value="Niečo iné" id="radio-5" />
        <label  for="radio-5">Niečo iné</label>
    </span>
</span>

in your code, in every loop, you changed id and for of all elements

.wpcf7-radio .wpcf7-list-item input is 3 elements input

.wpcf7-radio .wpcf7-list-item label is 3 elements label

CodePudding user response：

There are a few ways of doing this, one is as follows (with explanatory comments in the code):

$(document).ready(function() {
  // here we retrieve a jQuery collection of the relevant elements, and use the anonymous function
  // of the each() method to iterate over those elements and perform functions upon their descendants;
  // the anonymous function passes two arguments into the function-body:
  // 'index' : the numerical index of the current element within the collection we're iterating through, and
  // 'element': a reference to the current element of the node, the 'this' of the function:
  $('.wpcf7-radio .wpcf7-list-item').each(function(index, element) {
    // here we cache a reference to the <input> element:
    let input = $(this).find('input');
    
    // here we use the prop() method to update the 'id' property of the <input> we found earlier,
    // and we use the anonymous function (using Arrow syntax here), which passes in two arguments:
    // 'counter': again, the index of the current property, and
    // 'current': the current-value of the property itself, here then we use 'current' to append
    // the index (from the each() method's anonymous function) to the current 'id':    
    input.prop('id', (counter, current) => `${current}_${index}`);
    
    // here we find the <label> element, and then call the attr() method to update the 'for'
    // attribute, and set that attribute-value to be equal to the <input> element's assigned 'id':
    $(this).find('label').attr('for', input.prop('id'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span >
  <span >
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
    <label  for="radio-5">Nový projekt</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu" id="radio-5" />
    <label  for="radio-5">Redizajn</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Niečo iné" id="radio-5" />
    <label  for="radio-5">Niečo iné</label>
  </span>
</span>

This is, of course, quite possible in plain JavaScript:

window.addEventListener('DOMContentLoaded', ()=>{
  // here we use document.querySelectorAll() to retrieve the wrapping elements:
  document.querySelectorAll('.wpcf7-radio .wpcf7-list-item').forEach(
    // using an Arrow function, which passes in two arguments to the function-body,
    // 'element' a reference to the current element of the NodeList over which we're iterating, and
    // 'index' the index of the current element among the NodeList:
    (element, index) => {
      // here we cache the <input> element:
      let input = element.querySelector('input');
      
      // we update the <input> element's id property, with a template string, which
      // appends the interpolated value:
      input.id  = `_${index}`;
      
      // and here we update the <label> element's htmlFor property (the 'for' attribute)
      // to be equal to the <input> element's id:
      element.querySelector('label').htmlFor = input.id;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span >
  <span >
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
    <label  for="radio-5">Nový projekt</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu" id="radio-5" />
    <label  for="radio-5">Redizajn</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Niečo iné" id="radio-5" />
    <label  for="radio-5">Niečo iné</label>
  </span>
</span>

If, of course, the HTML elements don't have an existing id upon which their new id might be based, then we can of course create one arbitrarily:

$(document).ready(function() {
  $('.wpcf7-radio .wpcf7-list-item').each(function(index, element) {
    // again, caching the <input> element:
    let input = $(this).find('input'),
        // using a template-literal string to interpolate JavaScript into the string,
        // here we form a string of "<tagName>-<input-type>-<index>":
        idValue = `${input.prop('tagName').toLowerCase()}-${input.prop('type').toLowerCase()}-${index}`;
    // and then use the prop() and attr() methods to assign that value as the attribute-, or property-,
    // value of the appropriate property or attribute:
    input.prop('id', idValue);
    $(this).find('label').attr('for', idValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span >
  <span >
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked">
    <label >Nový projekt</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu">
    <label >Redizajn</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Niečo iné">
    <label >Niečo iné</label>
  </span>
</span>

And, again, in plain JavaScript:

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.wpcf7-radio .wpcf7-list-item').forEach(
    (el, index) => {
      let input = el.querySelector('input'),
        idValue = `${input.tagName.toLowerCase()}-${input.type.toLowerCase()}-${index}`;

      input.id = idValue;
      el.querySelector('label').htmlFor = idValue;
    });
});

<span >
  <span >
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked">
    <label >Nový projekt</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Prerábka / redizajn existujúceho projektu">
    <label >Redizajn</label>
  </span>

<span >
    <input type="radio" name="moznost-typ-projektu" value="Niečo iné">
    <label >Niečo iné</label>
  </span>
</span>