基于input的id、name属性为文本输入框创建label的技术问询

Let's walk through fixing your code to correctly generate hidden <label> elements for every text-type <input> using their id and name attributes. There are a few key issues in your original code that were preventing it from working as expected:

Key Issues in the Original Code #

• Global input selection inside the loop: Using $("input") inside .each() selects all inputs on the page instead of the specific one you're iterating over. You need to use $(this) to target the current input.
• Incorrect name attribute check: $(this).name doesn't work for jQuery objects—use native DOM property this.name or jQuery's .attr('name') instead.
• Trying to append to an input: Inputs are self-closing elements and can't have child elements. You need to insert the label adjacent to the input (before/after) instead of appending to it.
• Not targeting only text inputs: Your requirement specifies text-type inputs, so your selector should narrow down to input[type="text"].

Corrected Code #

First, here's a complete HTML example to work with:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
  <tbody>
    <tr>
      <td>Account Reference</td>
      <td><input type="text" id="accountRef" name="Account Reference"></td>
    </tr>
    <tr>
      <td>Customer Name</td>
      <td><input type="text" id="custName" name="Customer Name"></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><input type="text" name="Email"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

And the fixed jQuery code:

$(document).ready(function() {
  // Target ONLY text-type input elements
  $('input[type="text"]').each(function() {
    const $currentInput = $(this);
    const inputName = $currentInput.attr('name');
    const inputId = $currentInput.attr('id');

    // Only create a label if the input has a name attribute
    if (inputName) {
      // Build the label element
      const $label = $('<label>')
        .attr('style', 'display:none !important;')
        // Link label to input via id (skip if input has no id)
        .attr('for', inputId || '')
        .text(inputName);

      // Insert the label immediately before the input (use .after() to place it after)
      $currentInput.before($label);
    }
  });
});

What's Improved #

• Precise targeting: We only select text inputs, avoiding checkboxes, radio buttons, etc.
• Element caching: $currentInput stores the current input to avoid redundant DOM queries.
• Valid DOM insertion: We use .before() to place the label next to the input (since inputs can't contain children).
• Robust attribute handling: We check if the input has a name before creating a label, and handle cases where an input might not have an id.

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