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属性，在创建元素时可以在jQuery中使用data:属性设置这些属性，并且可以使用.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

作为一个FYI，我最终向LI添加了一个数据值属性，而不是使用jQuery.data()。

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

再次感谢你的帮助！