如何使用jQuery获取div元素上定义的自定义属性值

错误原因 #

你使用的val()方法仅适用于<input>、<select>、<textarea>这类有value属性的表单元素，普通<div>不属于表单元素，自然无法通过val()拿到自定义属性值。

正确实现方案 #

• 方法1：用jQuery的attr()方法直接获取指定属性值
  这个方法对所有自定义属性都生效，直接传入属性名即可：

  $(document).ready(function() {
    // 拿到的是字符串类型的 '10'
    console.log($("div#named").attr("Items"));
    // 如果需要数值类型，自行转换即可
    console.log(Number($("div#named").attr("Items")));
  });
  

• 方法2：使用W3C规范的data-*自定义属性写法（更推荐）
  按照标准，自定义属性建议加data-前缀，这种属性可以直接用jQuery的data()方法获取，还会自动转换数据类型：
  先修改HTML代码：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <div id="named" data-items='10'>Hello World!!</div>
  

  对应的JS获取代码：

  $(document).ready(function() {
    // 直接拿到数值类型的 10，不需要手动转换
    console.log($("div#named").data("items"));
  });
  

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