如何使用JavaScript或jQuery为无ID的input元素添加label标签

我想要给如下input元素添加label标签：

<div class="el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--time-select">
 <input type="text" autocomplete="off" name="" placeholder="Από" class="el-input__inner"> 
  <span class="el-input__prefix">
   <i class="el-input__icon el-icon-time"></i>
  </span>
  <span class="el-input__suffix">
   <span class="el-input__suffix-inner">
    <i class="el-input__icon"></i>
   </span>
  </span>
</div>

我此前尝试了其他问题中给出的如下代码，但并未生效。该input没有ID属性，我不清楚是否可以通过class属性实现需求：

jQuery(function ($) {
    $('input').wrap(function () {
        return $('<label />', {
            for: this.id
        }).append(this.previousSibling)
    })
})

编辑补充
需要操作的元素是侧边栏日历下方的2个日期字段。

失效原因 #

原有代码依赖input的id属性生成label的for关联值，但目标input没有预设id，导致关联失效，同时全局$('input')选择器会误匹配页面其他输入框。

解决方案 #

方案1：隐式关联（推荐，无需ID） #

直接将input包裹在label标签内，无需id即可实现点击label触发input聚焦，兼容性和无障碍表现更好，可精准匹配侧边栏的两个时间输入框：

jQuery(function ($) {
  // 仅选中目标时间选择器下的输入框，避免影响其他元素
  $('.el-date-editor--time-select .el-input__inner').each(function (index) {
    // 用label直接包裹input
    $(this).wrap('<label class="custom-time-label" data-index="' + index + '"></label>');
    // 如需在label内添加说明文字，可取消注释下方代码
    // $(this).parent().prepend('<span>选择时间' + (index + 1) + '</span>');
  });
});

方案2：显式关联（动态生成ID） #

如果需要label和input布局分离，可动态生成唯一ID绑定for属性：

jQuery(function ($) {
  $('.el-date-editor--time-select .el-input__inner').each(function (index) {
    // 生成唯一ID
    const uniqueId = 'time-select-input-' + index;
    // 给input设置ID
    $(this).attr('id', uniqueId);
    // 生成带for属性的label
    $(this).wrap('<label for="' + uniqueId + '" class="custom-time-label"></label>');
  });
});

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