使用jQuery .load()加载头部后无法遍历页面href元素的问题

嘿，你这问题我之前也踩过坑——核心原因就是异步加载的时序问题！

你用$.load()加载头部内容的时候，这个操作是异步的：浏览器会后台发送请求去获取头部HTML，同时继续执行后续代码。而你现在的getCurrentPage()函数，是在头部内容还没被插入到DOM里的时候就执行了，自然找不到那些.navLinks元素。

修复方案：把遍历逻辑放到.load()的回调函数里 #

.load()方法支持传入一个回调函数，这个函数会在加载完成且内容成功插入DOM之后才执行，刚好能解决你的时序问题。举个实际的修改例子：

// 假设你原来加载头部的代码是这样的
$("#header-container").load("your-header-file.html", function() {
  // 回调函数内：头部已经完全插入DOM了，现在调用getCurrentPage完全没问题
  getCurrentPage();
});

function getCurrentPage(){ 
  var count = 0; 
  $(".navLinks").each(function() { 
    count += 1; // 补个分号，稍微规范下代码~
    console.log('this.href' + this.href);
    console.log('windowloc' + window.location.href);
    if (this.href == window.location.href) {
      // 这里写你的匹配逻辑代码
    }
  });
}

为什么这样有效？ #

异步操作的核心就是“等任务完成再执行后续逻辑”——.load()的回调就是专门用来处理加载完成后的操作的。把getCurrentPage()放在回调里，就确保了.navLinks元素已经存在于DOM中，遍历自然能精准找到它们。

如果你的getCurrentPage()之前是在$(document).ready()里执行的，那一定要把它移到回调里，否则还是会因为时序差找不到元素哦。

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