Question

我有一个包含多个div元素的网页，例如：

<div id='ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA'>
</div>

我希望每个div元素在加载时调用javascript函数，以填充div。理想情况下，我本来想做

<div id='ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA'
     onload=getcontent('ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA');>
</div>

但当然，div元素不允许onloads。有没有办法做到这一点？我已经阅读了很多地方，jQuery可以为此提供帮助，但我无法弄清楚如何对其进行编码。非常感谢任何帮助！

Answer 1

要在没有jquery的情况下执行此操作，您只需要为窗口设置onload，并告诉它如何处理每个div。但是jquery使这更加简单。

所以没有：

 window.document.onload = function() {
      var divs = document.getElementsByTagName("div");
           for(var i = 0; i < divs.length; i++)
              divs[i].text("blah blah blah");
           }
  };

它可能是innerHTML。我得仔细检查一下。但这就是要点。用jquery：

   $(function(){
          $("div").text("blah blah blah");
    };

这当然假设每个div都获得相同的文本。如果你希望它基于ID或类，你肯定想要jquery。

PS - 大多数网页都试图避免在实际的HTML中放置javascript事件处理程序。如果你在加载时设置事件处理程序，则没有必要，代码更清晰。 Jquery 绝对对此有所帮助。

Answer 2

如果您的内容基于div的ID，那么对Anthony的代码稍作修改就可以了

document.onload = function() {
          var divs = document.getElementsByTagName("div");
          for(var i = 0; i<divs.length;i++){
              divs[i].innerHTML = getContent(divs[i].id);
          }

Answer 3

我会为你想要“自动加载”自己内容的div分配一个类。这使得标记更清晰，JavaScript更简洁。

$(function() {
    $('.autoload').each(function() {
        // Use AJAX
        $.get("service.php", {id: this.id} function(response) {
            // Handle server response here
        });

        // Or a local data island
        this.innerHTML = getDataById(this.id);
    });
});

Answer 4

使用jQuery：

您应该考虑使用$ .load（）来检索html内容。它比$ .get（）更容易使用。如果你提供参数，它将使用POST语义......

在任何情况下，您是否真的想为每个 div单独回拨服务器？ ..也许您应该考虑一个单独的调用，将累积的div id等待内容集发送到您的Web服务函数，然后返回一个json结构，您可以在成功填充div一次性行走时走过.. < / p>

像（未经测试！）：

$(function() {
    var ids = [];
    $('div.autoload').each() { function() { ids.push($(this).attr('id')); });
    $.get('service.php', {ids: ids}, function (response) {
       $.each(response.perdiv, function (i, c) {
          $('div#' + c.id).html(c.html);
       });
    });
});

AJAX - 加载所有div元素

4 个答案: