JQuery 追加删除 IE 和 Edge 中的字符

Question

使用JQuery，当我遍历数组并将值附加到UL时，它在Chrome和Firefox中工作正常。在 IE 和 Edge 中，如果值以数字开头，后跟短划线或下划线，则会截断该值。

var listItems = $('#list1');
var result = ['1-2-3', '1_2_3', 'a-b-c', 'a_b_c'];
$.each(result, function(key, value) {
  listItems.append($('<li/>', {
    value: value,
    text: value
  }))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list1"></ul>

预期成果：

<ul>
<li value="1-2-3">1-2-3</li>
<li value="1_2_3">1_2_3</li>
<li value="a-b-c">a-b-c</li>
<li value="a_b_c">a_b_c</li>
</ul>

实际结果：

<ul>
<li value="1">1-2-3</li>
<li value="1">1_2_3</li>
<li value="a-b-c">a-b-c</li>
<li value="a_b_c">a_b_c</li>
</ul>

Answer 1

不要使用 value .根据规范，li元素的值必须是整数：

value属性(如果存在(必须是有效的整数。它用于确定列表项的序号值，当li的列表所有者是ol元素时。

IE 和 Edge 通过从值中提取整数前缀来强制实施此要求;仅当值不以整数开头时，它们才会保留该值。

如果需要将自定义数据附加到元素，请使用data-XXX属性，可以在创建元素时使用 data: 属性在 jQuery 中设置这些属性，也可以使用 .data() 方法获取和更新。

var listItems = $('#list1');
var result = ['1-2-3', '1_2_3', 'a-b-c', 'a_b_c'];
$.each(result, function(key, value) {
  listItems.append($('<li/>', {
    data: {
      value: value
    },
    text: value
  }))
});
$("li").click(function() {
  alert($(this).data("value"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list1"></ul>

Answer 2

仅供参考，我最终向 LI 添加一个数据值属性，而不是使用 jQuery.data((

$.each(result, function (key, value) {
    listItems.append($('<li/>', {
      text: value
    }).attr("data-value", value))
  }
);

再次感谢您的帮助！