如何用jQuery选择器为DOM元素绑定自定义函数？附原生JS实现示例

当然可以用jQuery选择器选中一组DOM元素，再为每个元素添加自定义函数，以下是两种贴合你需求的实现方式：

方式一：直接为原生DOM元素添加自定义方法 #

这种方式和你原生JS的实现逻辑一致，通过jQuery选择器选中元素后，遍历每个对应的原生DOM对象，为其绑定format函数：

// 选中目标元素组（这里用类选择器示例，可根据实际需求替换为其他jQuery选择器）
$('.weather-temperature').each(function() {
  // this 指向当前遍历到的原生DOM元素
  this.format = function(val) {
    var fTemp = val * 9 / 5 + 32;
    var fDisp = Math.round((fTemp + Number.EPSILON) * 10) / 10;
    this.innerText = fDisp.toString();
  };
});

如果是针对单个元素（比如你原代码中的唯一ID元素），可以简化为：

const $target = $('#WeatherObservation.Temperature');
if ($target.length) {
  // 通过[0]获取原生DOM对象
  $target[0].format = function(val) {
    var fTemp = val * 9 / 5 + 32;
    var fDisp = Math.round((fTemp + Number.EPSILON) * 10) / 10;
    this.innerText = fDisp.toString();
  };
}

方式二：扩展jQuery对象方法（可选） #

如果你希望通过jQuery调用方式来实现格式化操作，可以扩展jQuery的原型方法，这样所有jQuery对象都能直接使用该方法：

// 扩展jQuery方法
$.fn.formatTemperature = function(val) {
  // 遍历所有匹配的元素并执行格式化
  return this.each(function() {
    var fTemp = val * 9 / 5 + 32;
    var fDisp = Math.round((fTemp + Number.EPSILON) * 10) / 10;
    this.innerText = fDisp.toString();
  });
};

// 使用示例：直接调用jQuery方法完成格式化
$('.weather-temperature').formatTemperature(22);

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