現在のイベントをトリガしたイベントからデータを取得するには？

Question

まず、私はdivの

<div class=grades> Grade: 1, 2, 3, 4, 5, 6 </div> 
<div class=classes> Classes numbers depend on the grade </div> 
<div class=students> Students names depend on the grade and class </div> 

のリストを入れて、各グレードの数が同じように定義されています。そして、私はグレードの番号をクリックすることで、クラス番号を表示するためにjqueryのを使用しようと

<a href=# class=gradenum>1</a> 
<a href=# class=gradenum>2</a> 
<a href=# class=gradenum>3</a> 
..... 

。

$("a.gradenum").click(function(){ 
    var grade = $(this).text(); 
    $("div#classes").load("ShowClasses.php",{'grade':grade}); 
}); 

期待どおりに動作します。クラスは同様の形式で示されています。今度は同じ学年とクラス番号で学生の名前を表示するために同じプロセスを使用したいと思います。

$("div#classes").on("click", "a.classnum",function(){ 
    var class = $(this).text(); 
    var grade = ?????? //How do I get the grade number here? 
    $("div#students").load("ShowStudents.php",{'grade':grade, 'class':class}); 
}); 

グレード番号は、最初にグレードの行でクリックした番号から取得します。

Answer 1

index()メソッドを使用できます。

$(".classes").on("click", ".classnum", function() { 
    var $this = $(this); 
    var class = $this.text(); 
    var grade = $this.index() + 1; // Start at 0 
    $(".students").load("ShowStudents.php",{'grade':grade, 'class':class}); 
}); 

Answer 2

私はこのようにそれを行うだろう：あなたは、変数に選択したグレードを保存し、クラスのイベントでそれを使うことができ

var grade; // Move this outside, making it "global". 

$("a.gradenum").click(function(){ 
    grade = $(this).text(); // Set the global grade 
    $("div.classes").load("ShowClasses.php",{'grade':grade}); 
}); 

$("div.classes").on("click", "a.classnum",function(){ 
    var class = $(this).text(); 
    // Use the global grade. 
    $("div#students").load("ShowStudents.php",{'grade':grade, 'class':class}); 
});