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。根据{{3}}，li元素的值必须为整数：

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

IE和Edge通过从值中提取整数前缀来强制执行此要求。如果值不是以整数开头，则只会保留该值。

如果需要将自定义数据附加到元素，请使用data-XXX属性，该属性可以在创建元素时在jQuery中使用data:属性进行设置，并且可以使用{ {1}}方法。

.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"));
});

Answer 2

作为一个供参考，我结束了向LI添加数据值属性的工作，而不是使用jQuery.data（）

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

再次感谢您！

jQuery追加在IE和Edge中删除字符

2 个答案: