安卓Chrome中jQuery设置href属性失效 改class选择器后生效原因是什么

这个问题本质是移动端Chrome和桌面端Chrome对DOM选择、渲染的逻辑差异导致的，常见诱因有三类：

• 重复ID匹配逻辑差异
  HTML规范明确要求页面ID全局唯一，但响应式布局场景下，很多站点会分别写桌面端导航栏、移动端汉堡菜单导航两套DOM结构，很容易出现两套结构里各有一个#magyar、#angol元素的情况。
  桌面端Chrome对重复ID的处理逻辑是固定返回DOM树中第一个匹配到的元素，刚好对应你可见的桌面端导航元素，所以赋值后能正常使用。而安卓Chrome受三星One UI定制的渲染逻辑影响，重复ID匹配时会优先返回移动端专属的隐藏元素，你给隐藏元素赋值href自然不会生效。换成class选择器后，jQuery会给所有匹配到.ma、.an的元素统一赋值href，不管元素是否隐藏，点击可见元素时自然能正常跳转。

• DOM挂载时序差异
  移动端浏览器为了优化首屏加载速度，会对非视口内的元素做延迟挂载处理。如果你的#magyar、#angol元素默认放在移动端折叠的汉堡菜单里，jQuery(document).ready触发时该元素还没被挂载到DOM树中，jQuery获取到的是空对象，赋值操作完全无效。如果你的.ma、.an类同时绑定了桌面端视口内的可见元素，该元素在ready触发时已经完成挂载，赋值自然能正常生效。

• ID全局命名冲突
  你使用的magyar（匈牙利语）、angol（英语）是公开语义的小语种名称，部分浏览器内置扩展、One UI系统注入的全局脚本会将这类语义化ID直接注册为window全局变量，导致jQuery的ID选择器匹配逻辑被干扰，无法正确定位DOM元素。换成自定义的短class名ma、an后不会触发这类全局命名冲突，选择器可以正常工作。

问题验证方案 #

你可以通过安卓Chrome的远程调试功能复现原问题：用数据线连接安卓设备和电脑，打开电脑端Chrome的chrome://inspect页面即可调试移动端页面，在原ID版本代码中加入console.log($("#magyar").length)：

• 输出为0：说明元素未挂载，对应时序问题
• 输出大于1：说明存在重复ID，对应匹配逻辑问题

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