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

JQuery shared functions for multiple .load events

本文关键字：共享 函数 JQuery load 事件 多个      更新时间：2023-09-26

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

这是我现在的(非常)简化版本:

第一页:

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

第二页:

<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来把三个div中的所有段落都括起来。我实际的主页在每个.load函数中都有更多的方法，重复相同的方法似乎并不理想。我试过在。load事件后触发我的方法，但我不能让它们工作，除非它们在。load函数内。

任何帮助都会很感激。谢谢你！

下面的代码更加动态，而且它会在脚本加载时包装每个div。

$(".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')
  });
  });
<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>

使用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>")
  });
});

编辑:这是我最终的工作:

$(".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//
};
相关文章：