jq 删除li后为什么li中的ABCD没有重新排序？

Question

jq：

var optionOrder=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

$(function() {
$("#a").click(function()
{
$(this).parent().remove();
var i=0;
$("#xuhao").each(function()
{
$(this).innerHTML=optionOrder[i++];
});
});
});

<ul id="parent-ul">
<li><p id="xuhao">A</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" id="a" class="btn btn-link">删除选项</button></li>
<li><p id="xuhao">B</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" class="btn btn-link">删除选项</button></li>
<li><p id="xuhao">C</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" class="btn btn-link">删除选项</button></li>
<li><p id="xuhao">D</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" class="btn btn-link">删除选项</button></li>
</ul>

Answer 1

有两个错误，
1》用id选择器时，匹配到了第一个xuhao之后就返回结果了，也就是结果集中只有一个duixiang，建议使用其他方式来筛选，如class

<ul id="parent-ul">
<li><p class="xuhao">A</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" id="a" class="btn btn-link">删除选项</button></li>
<li><p class="xuhao">B</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" class="btn btn-link">删除选项</button></li>
<li><p class="xuhao">C</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" class="btn btn-link">删除选项</button></li>
<li><p class="xuhao">D</p><textarea class="option-information" class="form-control" rows="2"></textarea><button type="button" class="btn btn-link">删除选项</button></li>
</ul>
2》在each中，由于this本来就是jquery对象(当然是决定于被轮循对象时DOM/jquery对象)，不用$()进行封装，直接使用即可，否则就变数组对象，无法使用innerHTML
var optionOrder=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

$("#a").click(function()
{
$(this).parent().remove();
var i=0;
$(".xuhao").each(function()
{
this.innerHTML=optionOrder[i++];
});
});

});