.each()函数中的增量不起作用

Question

我正在尝试向所有单选按钮添加一个具有递增值的唯一id属性，并向所有标签添加for属性。这是行不通的：

$(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);                    
    });
});

这是输出HTML：

<span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
        <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Nový projekt</label>
    </span>

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

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

Answer 1

你可以试试：

​

$(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 class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
        <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
        <label class="wpcf7-list-item-label" for="radio-5">Nový projekt</label>
    </span>

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

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

​

在代码中，在每个循环中，都更改了所有元素的id和for。

.wpcf7-radio .wpcf7-list-item input是三元素input

.wpcf7-radio .wpcf7-list-item label是三元素label

Answer 2

有几种方法可以这样做，其中一种方法如下(代码中有解释性注释)：

​

$(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 class="wpcf7-form-control wpcf7-radio">
  <span class="wpcf7-list-item first">
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
    <label class="wpcf7-list-item-label" for="radio-5">Nový projekt</label>
  </span>

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

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

​

当然，这在普通的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 class="wpcf7-form-control wpcf7-radio">
  <span class="wpcf7-list-item first">
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked" id="radio-5" />
    <label class="wpcf7-list-item-label" for="radio-5">Nový projekt</label>
  </span>

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

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

​

当然，如果HTML元素没有一个现有的id作为其新id的基础，那么我们当然可以任意创建一个：

​

$(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 class="wpcf7-form-control wpcf7-radio">
  <span class="wpcf7-list-item first">
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked">
    <label class="wpcf7-list-item-label">Nový projekt</label>
  </span>

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

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

​

同样，在朴素的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 class="wpcf7-form-control wpcf7-radio">
  <span class="wpcf7-list-item first">
    <input type="radio" name="moznost-typ-projektu" value="Nový projekt" checked="checked">
    <label class="wpcf7-list-item-label">Nový projekt</label>
  </span>

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

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

​