Question

我试图从函数的输入值中使用jQuery追加div，但注意到除了附加到主体的主div之外我没有得到任何东西：

$result=$stmt->fetchAll();
$_SESSION['id'] = $result[0]->Id;
$_SESSION['user'] = 'user';

如果the_key =“AAAAA”，则有效。

我没有那么好的尝试添加引号并没有真正成功，最终导致错误（无法识别的表达式），因为引号最终出现在表达式中：

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”值的对象都包含空格。

Answer 1

id值不能包含空格。这只是the only restriction on id values in HTML（除此之外，它们必须是唯一的）。
另外，CSS ID selectors也不能包含非转义空格（因为空格是后代组合）。但这并不重要，因为＃1。： - ）

使用有效的ID，并且如果它没有HTML id中允许的任何字符，但没有CSS ID选择器（或者你正确地逃避这些字符），没有引号的串联将起作用。

Answer 2

ID中的空格是一个问题＆＃34;对于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 attribute值的合法字符。

即使它在某些情况下可能“有效”，也无法保证它始终存在。

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>

当$（'＃div'+变量）中的变量包含空格时，Jquery没有找到要追加的div

3 个答案: