ボタンをクリックすると最も近い値から値を取得する

Question

私はjqueryとajaxを使って私が使っている教師のデータベースである他のタイプのユーザーにユーザーであるユーザーのタイプを追加したいという点でプロファイル管理機能を実行しようとしています。私は、各学生が、各学生の追加ボタンを押すと警告ボックスに定義されていない（これはデータベースから選択するためにPHPを使って行われたリスト）HTMLページにリストされている追加ボタンを持っていることを達成するために直面​​していますHTMLの

一部は

<li class="studdet"> 
    <div class="row"> 
     <div class="col-md-6" id="studname"> 
     <div class="col-md-3" id ="all"> 
      <label>Name Of Student:</label> 
      <p id="nameOfStud" >name of student fetched from database</p> 
     </div> 
     <div class ="col-md-3"> 
      <label></label> 
      </br></br> 
      <button class="btn-u" id="addStudents">Add</button> 
     </div> 
     </div> 
    </div> 
</li> 
<li class="studdet"> 
    <div class="row"> 
     <div class="col-md-6" id="studname"> 
     <div class="col-md-3"> 
      <label>Name Of Student:</label> 
      <p id="nameOfStud" >Name of student fetched from data base</p> 
     </div> 
     <div class ="col-md-3"> 
      <label></label> 
      </br></br> 
      <button class="btn-u" id="addStudents">Add</button> 
     </div> 
     </div> 
    </div> 
</li> 

生徒の名前の値をgetttingためのjQueryの

012であります

$(document).on('click', '#all #addStudents', function() { 
     var option = $(this).closest("id","nameOfStud").html(); 
     alert(option); 
     // $.ajax({url: "http://localhost/ededge/Add_students/add_to_group",data: {studentname : option},type:"POST", success: function(result){ 
     // $('#studdet').attr('class','label label-light'); 
     // alert(result); 
     // }}); 
    }); 

しかし、私は何を取得していますと、

が

Answer 1

：

<button class="btn-u addStudents">Add</button> 

は、次のコードを試してみてくださいを次のように

あなた<p>要素を変更します。 次は試してみてください

$(document).on('click', '#addStudents', function() { 
    var option = $(this).closest('div#studname').find('p#nameOfStud').text(); 
    alert(option); 

}); 

以前のDOMツリー内のpタグの子孫のid studname

find('p#nameOfStud')検索でDOMのheirachy中の親のdivのための10件の

closest('div#studname')検索はdiv要素を検索しました。

.text()は

Answer 2

前に、あなたはjQueryの中に複数のIDを持つことができないように私の誤りを見つけるために私を助けて警告ボックスで定義されていません。 IDはユニークです。

<p class="nameOfStud" >Name of student fetched from data base</p> 

変更あなたの 'ボタン' を次のように：

$(function(){ 
    $('.addStudents').click(function(){ 
     var option = $(this).closest('.nameOfStud').html(); 
     alert(option); 
    }); 
});