CharAt在表中不起作用，在.each循环中输入

Question

目标：获取输入字段中的第一个字符并将其放置在输入框旁边。我试着这样做是为了分类。jQuery数据表不起作用，我正在寻找替代解决方案。

可能的解决方案：获取第一个字符charAt(0(，并将其放在输入字段旁边，以使该列"可排序"。

期望结果：

• D[末日，医生]
• 风暴，强尼

当我删除下面的.each循环时，它确实有效，所以我想知道这是否只是语法问题？

我试过ID和GetElementsByClassName，但只在ID方面运气好。但ID只能使用一次，我只是想让它发挥作用：/。有什么建议吗？

$("input").each(function (index) {
var x = document.getElementById("nameSort").value;
var Val = x.charAt(0);
document.getElementById("nameSort").insertAdjacentHTML("beforebegin", Val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr><th>Name</th></tr>
<tr>
<td>
<input id="nameSort" class="sortme" value="Doom, Doctor">
</td>
</tr>
<tr>
<td>
<input id="nameSort" class="sortme" value="Storm, Johnny">
</td>
</tr>
</table>

Answer 1

您正在重用ID。要解决这个问题，只需在jQuery中使用this关键字。就像这样：

$("input").each(function (index) {
var val = $(this).val().charAt(0);
$(this).before(val + " ");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr><th>Name</th></tr>
<tr>
<td>
<input id="nameSort" class="sortme" value="Doom, Doctor">
</td>
</tr>
<tr>
<td>
<input id="nameSort" class="sortme" value="Storm, Johnny">
</td>
</tr>
</table>

Answer 2

我认为代码中的主要问题是id应该是唯一的。您不应该对两个输入都使用nameSort。

问题的解决方案是在$("input"(上循环，在回调函数中，您可以使用this，这将是您循环使用的元素：

<table class="table">
<tr>
<th>Name</th>
</tr>
<tr>
<td>
<input id="nameSort1" class="sortme" value="Doom, Doctor" />
</td>
</tr>
<tr>
<td>
<input id="nameSort2" class="sortme" value="Storm, Johnny" />
</td>
</tr>
</table>
<script>
$("input").each(function (index) {
var x = this.value;
var Val = x.charAt(0);
this.insertAdjacentHTML("beforebegin", Val);
});
</script>