jquery - 无法选择 ID 为 =":1"的 div

Question

对网络内容有点菜鸟，但我有一个带有此标签的 div:

<div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset="1">

我已经测试过我的 jQuery 可以正常工作(目前使用的是 2.1.3 版)。 我测试了众多其他关于选择器中的冒号的 SO 帖子中推荐的选择器，然后是其他一些。我已经分别尝试了下面的每个 jQuery 调用，但没有一个真正隐藏了我试图获取的元素。

$(function() {
  $("#\\:1").hide();
  $("#\:1").hide();
  $(":1").hide();
  $("\3A1").hide();
  $("\3a1").hide();
  $("\3A 1").hide();
  $("\3a 1").hide();
  $('[aria-labelledby="\\:1.label"]').hide();
  $('[aria-labelledby="\\:1.label"] *').hide();

  $(document.getElementById(":1")).hide();
  $(document.getElementById("\:1")).hide();
});

要么没有任何反应，要么我收到上述调用的语法错误。

Chrome 顺便说一下 CSS 路径是“#\3a 1”。

编辑 这有效:

$(function() {
  setTimeout(function() {
    $("#\\:1").hide();
  }, 1000);
});

我想问题是 div 没有实际加载或其他什么。这仍然是一个问题，因为上面的解决方案由于显而易见的原因而存在缺陷。我会向 Google Group 询问这个 API(它是 block 状的)，也许会有一个关于何时加载或其他什么的回调。

编辑

完全是菜鸟错误——我要找的内容实际上是插入到一个初始化函数中。这就是为什么在我通常调用 jQuery 时它不存在的原因；我反而需要把它放在这里:

init = function() {

  Blockly.inject(document.getElementById('blocklyDiv'),
      {toolbox: document.getElementById('toolbox')});
  Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,
      document.getElementById('startBlocks'));
  $("#\\:1").hide();
}

Answer 1

:1 是 HTML5 中完全有效的 id 属性:

The id attribute specifies its element's unique identifier (ID).

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

但是，它可能需要一些转义。

CSS - CSS ID 选择器

在 CSS 中，要通过 ID 获取元素，请使用 ID selector :

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier.

但是，:1 不是有效的标识符:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

因此，您不能使用选择器#:1，但您可以将其转义为#\:1。

#\:1 {
    /* CSS styles */
}

JavaScript - CSS ID 选择器

在 JavaScript 中，您可以使用 document.querySelector获取与 CSS 选择器匹配的(第一个)元素。这同样适用于 jQuery。

您可以使用 CSS.escape [警告 - 实验性技术] 对字符串进行转义，使其成为有效的 CSS 标识符:

document.querySelector("#" + CSS.escape(":1"));

或者，您可以直接使用#\:1。但是，请注意，在 JavaScript 字符串文字中，字符 \ 转义字符，因此 "#\:1" 变为 "#:1"。因此，您必须使用另一个 \ 转义 \:

document.querySelector("#\\:1");

请注意，即使您使用 CSS.escape，如果 ID 包含 \ 或引号，您也必须在字符串文字中对它们进行转义。

JavaScript - ID

但 JavaScript 也有 document.getElementById ，比 CSS 选择器更快更简单。

它直接通过其 ID 获取元素，而不是 CSS 转义版本:

document.getElementById(":1");

请注意，如果 ID 包含 \ 或引号，您必须在字符串文字中对它们进行转义。