使用 jquery/javascript 选择具有特殊字符的元素 id

Question

我有一个包含许多不同元素 ID 的 jsp。示例：

<div id="divName">
...
  <tr id="tr_0_123/45">
    <input type="hidden" name="field_0_123/45" value="NAME_Field" id="field_0_123/45">
  </tr>
</div>

问题是我需要能够从我的输入中读取值字段。为此，我使用

function workOnValue(){
  var idTr = 'tr_0_123/45';
  var idName = 'field_0_123/45';
  ${"#divName #"+idTr +" input[id='"+idName+"']).each(function(){
        do something...
  }
}

当我运行此代码时，JQuery 找不到任何具有该 id 的输入，同时找不到任何其他类型的不包含字符 / 它的 id。 我尝试了$.escapeSelector，但我的 jQuery 版本太旧，无法使用。 我尝试使用idName.replace("/","\\/"); 或.replace(/[|\(\)#\\\/]/g, '\\$&');

你有什么建议吗？

Answer 1

如果你只是想转义/，你可以用idName.replace("/", "\/")替换idName，而且在HTML本身中，ID定义的末尾没有关闭"，所以实际的ID名称本身可能会被/ 截断，因为"s 对于没有空格的ID 是不必要的，而且据说也没有斜杠。

所以只需在输入的 ID 中添加一个结束 "。

另一件事是，如果您按 ID 进行选择，则没有理由选择父节点的 ID，因为每个 ID 都是唯一的。如果您只想在元素中选择一种输入类型，您可以将所有代码更改为 ${"input[id='"+idName+"']) 或 ${"#divName input") 或 ${"#" + idTr +"input")。

Answer 2

您的 HTML 格式错误； tr 应位于 tbody 或 thead 中，后者位于 table 中。 tr 中的内容也应该在td 或th 中。请在下面的演示中查看console.log( $tr[0] ); 的输出。

您可以直接使用id 选择input 元素； id 属性是唯一的 - 如果不是，那么在您更正 table HTML 后，您的 HTML 格式仍然会出错。您可以使用$('[id="id-value"]') 按 id 进行选择。这两个演示演示了无论表格 html 是否格式错误，您都可以正确选择输入元素。请参阅下面console.log( $input ); 的输出。

$tr = $('[id="tr_0_123/45"]');
$input = $('[id="field_0_123/45"]');
console.log( $tr[0] );
console.log( $input.val() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divName">
...
  <tr id="tr_0_123/45">
    <td><input type="hidden" name="field_0_123/45" value="NAME_Field" id="field_0_123/45"></td>
  </tr>
</div>

$tr = $('[id="tr_0_123/45"]');
$input = $('[id="field_0_123/45"]');
console.log( $tr[0] );
console.log( $input.val() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divName">
...
<table>
  <tbody>
  <tr id="tr_0_123/45">
    <td><input type="hidden" name="field_0_123/45" value="NAME_Field" id="field_0_123/45"></td>
  </tr>
  </tbody>
</table>
</div>

注意

1. 如果您有权访问生成 ID 的 JSP 页面，请对其进行编辑以删除特殊字符。
2. 如果输入元素的 ID 不是唯一的 - 您使用 .each() 的事实暗示了这一点，请编辑 JSP 页面以使其唯一或将 id 属性更改为类属性。

参考文献

1. HTML: Allowed Characters in id Attribute
2. Best Practice for Naming the Id Attribute of Dom Elements
3. What is the standard naming convention for html/css ids and classes?