Question

我使用JQuery .load函数将一些段落从3个单独的URL拉到我主页上的3个单独的div中。然后，我想使用JQuery为主页上的3个div中的每一个添加函数。

这是我现在拥有的（非常）简化版本：

第1页：

<div class="mycontent">
<P> test </p>
</div>

第2页：

<div class="mycontent">
<p> test </p>
</div>

第3页：

<div class="mycontent">
<p> test </p>
</div>

主页标记：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

主页JQuery：

$(document).ready(function(){

$(".div1").load("myurlA.aspx .mycontent p", function(){
$(".div1 p").wrapAll("<div class='x'></div>");
});

$(".div2").load("myurlB.aspx .mycontent p", function(){
$(".div2 p").wrapAll("<div class='x'></div>");
});

$(".div3").load("myurlC.aspx .mycontent p", function(){
$(".div3 p").wrapAll("<div class='x'></div>");
});

});

这有效......但是我想用一个.wrapAll来包装所有3个div中的所有段落。我的实际主页在每个.load函数中都有更多的方法，并且重复相同的方法似乎并不理想。我已经尝试在.load事件之后触发我的方法，但我无法让它们工作，除非它们在.load函数中。

任何帮助将不胜感激。谢谢。

Answer 1

使用jQuery.when：

$(document).ready(function() {
  $.when(
    $(".div1").load("myurlA.aspx .mycontent p")
    $(".div2").load("myurlB.aspx .mycontent p")
    $(".div3").load("myurlC.aspx .mycontent p")
  ).then(function() {
    $("div p").wrap("<div class='x'></div>")
  });
});

Answer 2

下面的代码更具动态性，并且在加载脚本时包装每个div。

＆＃13;

$(".div-link").each(function() {
  var current = $(this);
  var link = current.data("link");
  
  current.load(link + " .mycontent p", function() {
    $(this).children("p").wrapAll("<div class='x'></div>");
    console.log('loaded')
  });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-link" data-link="myurlA.aspx"></div>
<div class="div-link" data-link="myurlB.aspx"></div>
<div class="div-link" data-link="myurlC.aspx"></div>

＆＃13;

Answer 3

编辑：以下是最终为我工作的内容：

$(".div1").load("myurlA.aspx .mycontent p", myFunction);
$(".div2").load("myurlB.aspx .mycontent p", myFunction);
$(".div3").load("myurlC.aspx .mycontent p", myFunction);

function myFunction(){

//shared methods & events//

};

JQuery共享多个.load事件的函数

3 个答案: