如何单独获取每个input元素的ID？现有实现存问题求助

我懂你现在的困扰啦！你想要给每个input对应的div里添加专属的标签，显示它自己的ID，但之前的方法要么只能拿到第一个input的ID，要么把所有ID堆在一起，没法对应到单个元素上。其实只要调整一下遍历逻辑，让每个input都被单独处理就行～

问题根源 #

你之前的代码里：

• $('input').get(0).id 只会获取第一个input的ID，所以所有标签都显示"one"
• each() 虽然遍历了所有input，但只是把ID存到数组里，没有针对每个input去生成对应的标签并添加到正确位置

解决方案：逐个遍历并处理每个Input #

我们可以在each()遍历每个input的时候，同时获取它的ID，然后生成标签并添加到它所在的父div里。这样每个input都会对应自己的标签：

$(document).ready(function() {
  // 遍历页面上的每一个input元素
  $('input').each(function() {
    // 获取当前input的ID
    var currentInputId = $(this).attr('id');
    // 创建包含当前ID的label元素
    var customLabel = $('<label>input ID = #' + currentInputId + '</label>');
    // 把label添加到当前input所在的div中（也就是它的父元素）
    $(this).parent().append(customLabel);
  });
});

代码解释 #

• $(document).ready(function() { ... })：确保页面所有元素加载完成后再执行代码，避免找不到input元素的问题
• $('input').each(function() { ... })：循环遍历每个input，每次循环里的this就代表当前正在处理的那个input
• $(this).attr('id')：获取当前这个input的专属ID，而不是所有input的ID
• $(this).parent()：定位到当前input的父div，这样标签就会被精准添加到对应input的旁边，不会串位

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
 <div><input type='radio' id="one" /></div>
 <div><input type='radio' id="two" /></div>
</div>
<div class="content">
 <div><input type='radio' id="three" /></div>
 <div><input type='radio' id="four" /></div>
</div>
<div class="content">
 <div><input type='radio' id="five" /></div>
 <div><input type='radio' id="six" /></div>
</div>

<script>
$(document).ready(function() {
  $('input').each(function() {
    var currentInputId = $(this).attr('id');
    var customLabel = $('<label>input ID = #' + currentInputId + '</label>');
    $(this).parent().append(customLabel);
  });
});
</script>

这样运行后，每个input的div里都会出现显示自己ID的标签，比如第一个div里会显示input ID = #one，第二个显示input ID = #two，以此类推～

内容的提问来源于stack exchange，提问作者dragoweb