javascript - JQuery Append 删除 IE 和 Edge 中的字符

Question

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

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

不要使用值。根据specification ，li 元素的值必须是整数:

The value attribute, if present, must be a valid integer. It is used to determine the ordinal value of the list item, when the li's list owner is an ol element.

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>