如何使用jQuery安全地为元素自身的.data()属性赋值？

这个坑我踩过！你遇到的核心问题是**this的指向不对**——在$(document).ready()的回调函数里，this默认绑定的是document对象，所以你把它存到data里，自然拿到的是#document而不是目标元素#myDiv。

下面给你几个不用重复编写$("#myDiv")选择器的可靠方案：

方案1：缓存DOM元素（最推荐） #

先把选择器的结果缓存到变量里，既避免重复查询DOM提升性能，又能轻松绑定自身：

$(document).ready(function() {
  // 缓存jQuery对象，后续直接用变量调用
  const $myDiv = $("#myDiv");
  // 存原生DOM元素（和你之前的解决方案效果一致）
  $myDiv.data("element", $myDiv[0]);
  // 如果你需要存jQuery对象也可以：$myDiv.data("element", $myDiv);
  
  const el = $myDiv.data('element');
});

方案2：用.each()绑定自身 #

在.each()的回调函数里，this会指向当前遍历到的原生DOM元素，完美适配单个或多个元素的场景：

$(document).ready(function() {
  $("#myDiv").each(function() {
    // 这里的this就是#myDiv对应的原生DOM元素
    $(this).data("element", this);
    const el = $(this).data('element');
  });
});

如果以后你的选择器变成.myDivs（多个元素），这个方案不用改代码就能让每个元素绑定自己。

方案3：利用.data()的函数式赋值 #

jQuery的.data()方法支持传入函数作为值，函数内部的this指向当前元素的原生DOM对象，不用额外变量也能实现：

$(document).ready(function() {
  $("#myDiv").data("element", function() {
    // 这里的this就是目标原生DOM元素
    return this;
  });
  
  const el = $('#myDiv').data('element');
});

这三个方案都能避免重复编写选择器，其中方案1最适合大多数场景，代码可读性和性能都最优；如果要批量处理元素，优先选方案2。

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