如何获取每个元素的 ID？答案

【问题标题】：How to get the ID of each element?如何获取每个元素的 ID？
【发布时间】：2020-10-30 15:54:27
【问题描述】：

我有多个具有不同 ID 的输入，我正在寻找一种方法来查找每个输入的 ID。我制作了a pen here，但基本上，这是我迄今为止尝试过的。

// DISPLAYS ALL ID's
var id = [];
$('input').each(function() {
  id.push($(this).attr('id'))
})

// DISPLAYS THE FIRST ID
var ids = $('.content div').find('input').attr('id');

// DISPLAYS THE FIRST ID
var i = $('input').get(0).id

// APPEND LABEL
var customlabel = $('<label>input ID = #' + i + '</label>');
$('.content div').append(customlabel);

<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>

我的目标只是分别获取每个输入的 ID。但是有了这个 var i，我只能得到第一个输入的 ID（每行都有“一个”）。当我使用 .each() 时，所有 ID 会一起显示（一、二、三、四、五、六）。

  var id=[];
  $('input').each(function(){
    id.push($(this).attr('id'))
  })

我的 jQuery 知识有限，我已经花了几个小时尝试在堆栈上找到的不同解决方案，因此非常感谢任何帮助。

【问题讨论】：

预期的结果是什么？标记最后应该是什么样子？
从您的示例看来，<label> 不是正确的元素。它应该被包裹在 <input /> 元素周围，或者通过其 for="..." 属性与 <input /> 元素链接
是的，标签是通过其“for=''”属性链接的，但我想让这个问题尽可能基本。我得到了 2 个可行的解决方案（来自 Pete 和 Thong），感谢您的帮助。

标签： jquery input

【解决方案1】：

你在这里：

$(".content div").each(function(){
    let id = $("input", this).attr("id");
    $(this).append("<label>"+id+"</label>");
});

【讨论】：

抱歉，但我不明白为什么，当我使用 .each() 时，它会在每一行显示所有 ID。你的sn-p有什么区别？无论如何，您的解决方案效果很好，非常感谢。
你的意思是这个？：
**var id=[]; $('input').each(function(){ id.push($(this).attr('id')) })**
你的码字是这样的：
**# 1：声明一个名为id的空数组**
**#2：对于每个输入，将输入的id放在id数组的末尾**
为什么它们会同时打印出来- 希望清楚。
好的，我明白了。再次感谢您的帮助丁字裤。非常感谢。

【解决方案2】：

如果您只是想在输入后添加 id 的标签，则需要在每个循环中执行此操作（而不是尝试将它们全部放入一个数组并在每个循环完成后附加）

$('input').each((index, input) => {
  const $thisInput = $(input);  // current input
  
  $thisInput.after(`<label for="${input.id}">input id = #${input.id}</label>`);  // add a label after the current 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>

【讨论】：

是的，它有效，非常感谢您的帮助。我现在必须在你的答案和 Thong 答案之间做出选择，因为两者都工作正常。

【解决方案3】：

使用$.each 遍历每个输入，然后使用create a DOM element label 并找到当前输入元素的parent 和append 新创建的标签。

$(function() {
  $.each($('input[type="radio"]'), function(key) {
    const label = $('<label/>').text(`input ID = #${key + 1}`);
    $(this).parent().append(label);
  });
});

<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>

【讨论】：