jQuery如何通过单个ID选择器为含多ID值的Div写入文本？

嘿，这个场景我熟！首先得提一句：HTML规范里ID属性是不允许包含空格的，这属于不规范写法，后续可能会引发其他兼容问题。不过既然你已经这么写了，咱们来搞定怎么正确选中这个元素～

为什么你的现有代码不行？ #

你调用fn('b')时，传入的参数是'b'，但目标元素的ID是"a b"，参数本身就传错了；就算你改成传'a b'，直接用$('#' + k)会生成选择器$('#a b')——这会被jQuery解析为「选中ID为a的元素下的所有<b>标签」，而不是ID为"a b"的元素，自然达不到预期效果。

两种可行的解决方案 #

方案1：使用属性选择器精确匹配ID

直接用jQuery的属性选择器，通过[id="xxx"]的形式精确匹配带空格的ID，代码修改如下：

function fn(k) {
  $('[id="' + k + '"]').text('test');
}

然后调用的时候传入完整的ID：

<div id="a b">
  <script>fn('a b');</script>
</div>

方案2：借助原生JS的getElementById

原生的getElementById可以直接识别带空格的ID（虽然不符合规范，但浏览器实际支持），拿到DOM元素后再转成jQuery对象即可：

function fn(k) {
  $(document.getElementById(k)).text('test');
}

调用同样需要传入完整ID：fn('a b')

更建议的做法 #

最好还是修改ID，去掉空格，比如改成"a-b"、"a_b"或者"ab"，这样就可以用常规的ID选择器$('#a-b')来选中元素，完全避免这类奇怪的问题，也符合HTML规范。

内容的提问来源于stack exchange，提问作者response