当 $('#div'+变量) 中的变量包含空格时，Jquery 找不到要附加到的 div

Question

我尝试使用jQuery从函数的输入值中附加div，但注意到除了附加到正文的主div之外，我什么也没有得到：

var the_key = "AAA AA"; //put here as an example
$('body').append('<div class="chart_canvas" id="div_'+ the_key +'" />');
$('#div_' + the_key).append('<div id="d3_canvas'+ the_key +'" />');

如果the_key = "AAAAA"，它有效。

我不太好的添加引号的尝试并没有真正成功，并且最终出现了错误(无法识别的表达式(，因为引号最终出现在表达式中：

$('#div_' + "'" + the_key + "'").append('<div id="d3_canvas'+ the_key +'" />');

有什么办法可以做到这一点吗？我从中读取这些"the_key"值的对象都包含空格。

Answer 1

1. id值中不能包含空格。这只是对 HTML 中id值的唯一限制(除了它们必须是唯一的(。

2. 另外，CSS ID 选择器也不能包含未转义的空格(因为空格是后代组合器(。但这并不重要，因为#1。:-)

使用有效的 ID，并且如果它不包含 HTML id s 中允许的任何字符，但不包含 CSS ID 选择器(或者您正确地转义了这些字符(，则不带引号的串联将起作用。

Answer 2

ID中的空格是jQuery的"问题"。尝试逃避它：

<script>
  // document.getElementById or similar
  document.getElementById('AAA AA');
  // document.querySelector or similar
  $('#AAA\ AA');
</script>

您也可以像这样使用属性选择器：

<script>
  $("*[id='AAA AA']");
</script>

Answer 3

空格不是 HTML 中 id 属性值的合法字符。

即使它在某些情况下可能"工作"，也不能保证它总是会。

console.log('test', document.getElementById('test'));
console.log('te st', document.getElementById('te st'));
console.log('jQuery test', $('#test').length);
console.log('jQuery te st', $('#te st').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">test</div>
<div id="te st">te st</div>