複数の.loadイベントのJQuery共有関数

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

}); 

これは動作します...しかし、私はすべての3つのdiv内のすべての段落をラップする単一.wrapAllを使用したいと思います。私の実際のメインページには、各.load関数内にもっと多くのメソッドがあり、同じメソッドを繰り返すのは理想的ではないようです。私は.loadイベントの後にメソッドをトリガしようとしましたが、.load関数の中にいなければ動作させることはできません。

ご協力いただければ幸いです。ありがとうございました。

Answer 1

以下のコードは、よりダイナミックで、プラスそのスクリプトがロードされたときには、それぞれの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>

Answer 2

使用​​：

$(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 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// 

};