jQuery("#"+id) 与 document.getElementById(""+id)

Question

我的一个 div id="ftbutton_1357567084/Team:8/User:10/Image:195" 有以下 ID，我想在调用 ajax 后替换它的 html。

当我尝试使用 jQuery 执行此操作时，类似以下的操作不起作用

jQuery("#"+id).html(SOME HTML HERE);

以下代码的工作原理

document.getElementById(id).innerHTML = SOME HTML HERE;

我知道 ID 不应该包含一些特殊字符

ID attributes should be = after an initial letter (a-z or A-Z), may also use 
periods and colons, in addition to letters, numbers, hyphens, and underscores. 

参考How do I select an element by an ID that has characters used in CSS notation?

但由于某种原因，我无法更改每个元素的 id，因为它被认为是站点。

我也试过了，但是没用

function jq( myid ) {
  return "#" + myid.replace( /(:|\.)/g, "\\$1" );
}
jQuery(jq("#"+id)).html(SOME HTML HERE);

我只是想知道是否是这种情况，我需要使用document.getElementById(""+id) 而不是jQuery("#"+id) 吗？

或者换句话说

document.getElementById(""+id) 比 jQuery("#"+id) 更可靠吗？

Answer 1

这样做：

$('[id="ftbutton_1357567084/Team:8/User:10/Image:195"]');

这实际上是一个有趣的问题。很可能 jQuery 认为 : 正在启动一个过滤器，例如 $('div:visible') 并且没有意识到它是一个完整的 ID。

Answer 2

问题是您添加了两次#。一次在函数中，一次在实际的jQuery 调用中。应该是这样的：

function jq( myid ) {
  return "#" + myid.replace( /(:|\.|\/)/g, "\\$1" ); //note that added `/`
}
jQuery(jq(id)).html(SOME HTML HERE); //don't add # again!

一个稍微不相关的提示：永远记住你可以使用一个实际的 DOM 对象来启动一个 jQuery 实例：

jQuery(document.getElementById(someId)); //this will work

Answer 3

/ is a meta character, you have to escape it as well:

要将任何元字符（例如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ）用作名称的文字部分，必须使用两个反斜杠对其进行转义：\\。

所以这应该可以正常工作：

function escape_selector( selector ) {
  return selector.replace( /([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1" );
}

（作为roasted mentioned in his comment，您还需要删除'#' +，否则您将其添加到选择器中两次）。

DEMO

Answer 4

最简单的答案似乎是：

function jq( myid ) {
  return $(document.getElementById(myid));
}

jq(myid).html(...);

Answer 5

正确的函数是：

function jq( myid ) {
  return *$("#" + myid)*.replace( /(:|\.)/g, "\\$1" );
}
jQuery(jq("#"+id)).html(SOME HTML HERE);