无法选择id =“：1”的div [英] Can't select div with id=":1"

问题描述

一个noob到web的东西，但我有一个div有这个标签：

 < div class = id =：1role =treeitemaria-selected =falsearia-expanded =falsearia-level =1aria-labelledby =：1.labelaria-setsize = aria-posinset =1> 
  

我测试了我的jQuery是否工作（目前使用版本2.1.3）。
我已经测试了推荐的选择器从众多其他SO的帖子关于冒号在选择器，然后一些其他。我已经尝试下面的每个jQuery调用单独，没有一个实际上隐藏了我想要获得的元素。

  $（function（）{
 $（＃\\：1）。hide（）; 
 $（＃\：1）hide（）; 
 $（：1）。hide（）; 
 $（\3A1）。hide（）; 
 $（\3a1）。 $（\3A 1）。hide（）; 
 $（\3a 1）。hide（）; 
 $（'[aria-labelledby =\\： 1.label]'）。hide（）; 
 $（'[aria-labelledby =\\：1.label] *'）。 b $（document.getElementById（：1））。hide（）; 
 $（document.getElementById（\：1））hide（）; 
} 
  

没有任何反应或上述调用的语法错误。

Chrome说CSS路径是'＃\3a 1'。

EDIT
这个工程：

  $（function（）{
 setTimeout（function（）{
 $ （＃\\：1）。hide（）; 
}，1000）; 
}）; 
  

我想问题是div实际上并没有加载。这仍然是一个问题，因为上面的解决方案是有缺陷的明显的原因。我会问Google群组这个API（封锁），也许有一个回调，当这个加载或某事。

EDIT

总的noob错误 - 我正在寻找的内容实际上是插入一个init函数。这就是为什么它不在那里我通常称为我的jQuery;我需要把它放在这里：

  init = function（）{
 
 Blockly.inject document.getElementById（'blocklyDiv'），
 {toolbox：document.getElementById（'toolbox'）}）; 
 Blockly.Xml.domToWorkspace（Blockly.mainWorkspace，
 document.getElementById（'startBlocks'））; 
 $（＃\\：1）。hide（）; 
} 
  

解决方案

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

id 属性指定其元素的唯一标识符
（ID）。

此值必须在所有 ID -subtreerel =nofollow> home子树，且必须包含至少一个字符。值
不得包含任何空格字符。

但是，可能需要进行转义。

CSS - CSS ID选择器

在CSS中，要获取元素的ID，请使用 ID选择器：

ID文档语言的属性允许作者为文档树中的一个元素实例分配一个
标识符。 CSS ID
选择器基于其标识符匹配元素实例。 CSS ID
选择器包含紧跟着ID值的＃，
必须是标识符。

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

， 标识符 （包括
中的元素名称，类和ID（选择器）只能包含字符[a-zA-Z0-9]和ISO 10646
字符U + 00A0和更高，加连字符（ - ）和下划线
（_）;他们不能以数字，两个连字符或连字符开头，后跟
。标识符还可以包含转义字符和任何
ISO 10646字符作为数字代码（见下一项）。例如，
标识符B& W？可写为B \& W \？或B \26 W \3F。

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

 ＃\：1 {$​​ b $ b / * CSS styles * / 
} 
  

JavaScript - CSS ID选择器

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包含 \ ，则
  

$ b <或引号，则必须在字符串文字中转义它们。

Kind of a noob to web stuff, but I have a div which has this tag:

<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">

I've tested that my jQuery is working (currently using version 2.1.3). I've tested the recommended selectors from the numerous other SO posts about colons in selectors and then some others. I've tried each of the jQuery calls below separately, and none have actually hidden the element I'm trying to get.

$(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();
});

Either nothing happens or I get a syntax error for the above calls.

Chrome says the CSS path is '#\3a 1' by the way.

EDIT This works:

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

I guess the problem is that the div isn't actually loaded or something. This is still a problem because the solution above is flawed for obvious reasons. I will ask the Google Group for this API (it's blockly), and maybe there is a callback for when this has loaded or something.

EDIT

Total noob mistake--the content I was looking for is actually inserted in an init function. That's why it's not there at the time I normally called my jQuery; I instead needed to put it here:

init = function() {

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

解决方案

:1 is a completely valid id attribute in HTML5:

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.

However, it may need some escaping.

CSS - CSS ID selector

In CSS, to get an element by its ID, use the 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.

However, :1 is not a valid identifier:

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".

Therefore, you can't use the selector #:1, but you can escape it as #\:1.

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

JavaScript - CSS ID selector

In JavaScript, you can use document.querySelector to get the (first) element that matches a CSS selector. The same applies to jQuery.

You can use CSS.escape [warning - experimental technology] to escape the string to make it a valid CSS identifier:

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

Alternatively, you can use #\:1 directly. However, note that in JavaScript string literals, the character \ escapes characters, so "#\:1" becomes "#:1". Therefore, you must escape \ with another \:

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

Note that, even if you use CSS.escape, if the ID contained \ or quotes, you would have to escape them in the string literal too.

JavaScript - ID

But JavaScript also has document.getElementById, a faster and simpler way than CSS selectors.

It gets an element directly by its ID, not a CSS escaped version:

document.getElementById(":1");

Note that if the ID contained \ or quotes, you would have to escape them in the string literal.

这篇关于无法选择id =“：1”的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！