如何获取触发元素ID并配置jQuery Timepicker的appendTo选项

直接说结论：这个插件的appendTo选项不支持传入函数动态返回选择器/元素，它只接受jQuery对象、DOM元素或者静态选择器字符串。你之前尝试用函数返回字符串的方式行不通，插件会把函数本身当成目标处理，自然报错。

不用逐个手动写ID的解决方案很简单：遍历每个.time元素，单独初始化插件，这样就能在遍历过程中拿到当前输入框的ID，动态生成对应的appendTo目标：

$(document).ready(function () {
  // 遍历所有.time输入框，逐个初始化
  $('.time').each(function() {
    const inputId = this.id;
    $(this).timepicker({
      step: 30,
      appendTo: `#${inputId}-tp`
    });
  });

  // 单个元素的初始化可保留，也可以统一用上面的方式处理
  $('#form2').timepicker({
    step: 30,
    appendTo: '#form2-tp'
  });
});

为什么之前的方法不行？ #

查看jquery.timepicker的源码就能发现，appendTo参数的处理逻辑是直接判断传入值的类型：如果是jQuery对象/DOM元素就直接使用，如果是字符串就当作选择器查找元素，但它完全没有处理函数类型的分支，所以传入函数的话，插件会把它当成无效目标，导致挂载失败。

修改后的效果 #

处理后，所有带.time类的输入框都会自动匹配对应的{id}-tp容器，下拉选择框会挂载到输入框同层级的父容器内，继承容器宽度，完美适配响应式布局，不用写重复的初始化代码。

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