jQuery load方法加载多个div而非单个的问题求助

嘿，我看你遇到了登录登出后.load-me内容重复加载的问题——本来只有2条帖子，结果显示了双倍内容对吧？咱们来一步步解决它。

问题出在哪？ #

你当前的代码逻辑里有两个小坑：

1. 你把.post作为load的目标元素，然后加载整个页面里的.load-me元素。这会把<div class="load-me">...</div>整个插入到.post里，虽然你先清空了.post，但服务器返回的页面里.load-me本身就嵌套在.post结构中，很容易因为选择器的匹配逻辑导致内容重复插入。
2. 提前调用.html('')清空.post是多余的——jQuery的load方法本身就会自动替换目标元素的内容，这步操作不仅没必要，还可能和后续的加载操作产生隐性冲突。

你原来的代码片段：

// 登出回调里的重复加载代码
$(".post").html('').load(location.href + " .load-me");

怎么改？ #

咱们直接针对.load-me元素来更新内容，并且优化选择器，只加载它内部的内容，而不是元素本身：

登出成功回调修改后： #

success : function ( data ) {
  $(".logged").html( logged_area );
  // 直接更新.load-me的内容，只取目标元素的子节点
  $(".load-me").load(location.href + " .load-me > *");
}

登录成功回调修改后： #

success : function ( data ) {
  $(".login-message").html( data );
  // 同样直接更新.load-me的内容
  $(".load-me").load(location.href + " .load-me > *");
}

为啥这样就好了？ #

• 直接操作.load-me元素，保持原有的DOM结构不变，不会出现不必要的嵌套。
• 用.load-me > *作为选择器，意思是只从服务器返回的页面里提取.load-me的直接子元素，而不是.load-me本身，这样内容会直接替换到当前的.load-me里，不会重复。
• 去掉了多余的.html('')调用，依赖load方法本身的内容替换机制，避免时序问题。

如果怕浏览器缓存旧内容，还可以加个时间戳参数确保每次加载的都是最新内容：

$(".load-me").load(location.href + "?t=" + new Date().getTime() + " .load-me > *");

这样改完，登录登出后应该就只会显示正确的2条帖子内容啦！

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