在jquery中包含空格的ID问题？

Question

我在ajax成功中动态生成表，并为每个表赋予一个id。此ID等于产品型号的编号。

但是在很多情况下，产品型号包含空格，由于它没有正确生成ID，就像模型是'MU-1 SLD G'那么动态表看起来像这样 <table id="MU-1" g="" sld="">

那么如何处理这种情况？

Answer 1

ID中不能包含空格。

生成表格内容时，请使用将空格更改为“ - ”的替换函数。从服务器接收的数据引用表行时，使用相同的函数生成要查找的有效ID。

执行此操作的函数的简单示例：

function replaceAllSpacesWithLines( string ) {
    return string.replace(/ /g, '-');
}

所以基本上在生成内容时，迭代来自ajax请求的所有数据 - 假设这是一个带有某种元素数组的json响应 - 并通过使用此函数为id创建表行。为了便于参考，您还可以为行设置数据属性，以便在需要时保留原始ID的值。

对于带有“SOME KEY 1”键的表格行，您最终可以得到：

<tr data-id='SOME KEY 1' id='SOME-KEY-1'> ... data ... </tr>

这样，当点击元素时，你可以检查real id的data-id，当从逻辑数据中选择行时，你可以重新生成id，或者只是查询dom中的行。特别是data-id。

我希望这会有所帮助：）

Answer 2

如果你不能为某些元素编写CSS选择器，那么你可以通过另一种方法获取它们并直接将这些元素传递给jQuery。例如，对于包含空格的ID，请使用getElementById方法：

http://jsfiddle.net/cvWt5/

<div id="foo bar">Hello</div>

在JS中：

var element = document.getElementById("foo bar");
jQuery(element).css({ color: "red" });

然而，由于ID中的空格为not valid HTML5，因此应避免在ID中使用空格。更好的解决方案是将空格字符更改为非空格字符，例如下划线，_，或改为使用camelCase标识符。