从 html jQuery 加载内容（许多不同的 div）答案

【问题标题】：Loading content from html jQuery (many different divs)从 html jQuery 加载内容（许多不同的 div）
【发布时间】：2012-10-16 05:20:39
【问题描述】：

我有很多 div

<div id="movies" rel="info.php?m=19923"></div>
<div id="movies" rel="info.php?m=98127"></div>
<div id="movies" rel="info.php?m=39423"></div>
<div id="movies" rel="info.php?m=32942"></div>
<div id="movies" rel="info.php?m=15454"></div>
<div id="movies" rel="info.php?m=143436"></div>

100 多个 div

我可以用 jQuery 和.load 以某种方式更新每个 div 以显示其亲属文件（info.php?m=XXXXX）信息吗？

我在这个http://jasonlau.biz/home/jquery/screw-a-jquery-plugin找到了这个功能

但我不想要懒惰的效果。就这样它从顶部开始加载。

【问题讨论】：

您不想这样做。让您的页面使用 100 多个 AJAX 请求来填充其内容是一个非常糟糕的主意。它不仅会削弱您的服务器，还会给用户带来非常糟糕的体验。您真的需要重新考虑如何将这个页面组合在一起。
好的，谢谢。我很担心这种情况。
我同意@meagar。如果您可以控制页面的呈现，则应该使用类似于服务器端的方法来包含或将 info.php 脚本的内容内联到页面中。

标签： jquery dynamic load rel

【解决方案1】：

下面是一个如何使用 jQuery 实现的示例。它找到所有具有class 名称movies 的元素并调用执行ajax 请求的jQuery get 函数。请求的响应可用作回调函数的第一个参数（本例中为data）。获得数据后，您可以使用 jQuery 的 html 函数将其添加到 DOM 元素中。

$(".movies").each(function(){ 
   // make a reference to the current div  
   var element = $(this);
   // get the url
   var url = element.attr('rel');
   // make ajax request
   $.get(url, function(data) {
      // append the data to the div
      element.html(data);
   });
})

请记住，HTML ID 应该是唯一的。在您的示例中，您有多个 ID 为 movies 的 div。您可以使用$('#movies') 按 ID 选择元素，但它只会返回与 ID 匹配的第一个元素。如果您可以控制 HTML，那么每个 div 应该看起来更像这样：

<div class="movies" rel="info.php?m=19923"></div>

【讨论】：