javascript - 使用ajax在div中加载项目

Question

我目前正在使用以下 JavaScript 来加载几个 div 中的项目:

<script>
    $.ajax({
        url: 'load.php?type=divA',
        cache: false,     
        success: function(data){
        $('#divA').html(data); 
        }
    });   
    $.ajax({
        url: 'load.php?type=divB',
        cache: false,     
        success: function(data){
        $('#divB').html(data); 
        }
    });  </script>

HTML:

<div id="divA">
<!-- Load divA item here -->
</div>
<div id="divB">
<!-- Load divB item here -->
</div>

我正在寻找(并认为)有更好的方法来做到这一点。与此类似:1 个 div 函数，自动加载(乘法)div 中的项目:

function loadItem(<DIV ID>) {
 $.ajax({
            url: 'load.php?type=<DIV ID>',
            cache: false,     
            success: function(data){
            $('<DIV ID>').html(data); 
            }
        }); 
};

Answer 1

我认为这样更好:

function loadItem(div) {
   $.ajax({
      url: 'load.php?type='+div,
      cache: false,     
      success: function(data){
         $('#'+div).html(data); 
      }
   }); 
};

$(function(){
   $('div[id^="div"]').each(function(){
      loadItem(this.id);
   });
});

<小时/>

这段代码的作用:

1. 创建一个全局函数，将函数置于文档之外。
2. 在文档就绪 block 中循环遍历 id 以 div 开头的 div，并将该 id 传递给函数。
3. 因此，如果有两个 div，则会有两个 ajax 调用。

<小时/>

这是一个迟来的回复:

$('div[class*="div"]').each(function(){ // class contains div
   loadItem(this.className.split(' ')[1]); 
});// split by ' ' space and pass the second index as arrays are 0 based index.