从最近的点击按钮获得价值

Question

我想要做一个配置文件管理功能，因为我想添加类型的用户是学生到其他类型的用户是老师的数据库为我使用我使用jquery和ajax但我正面临一个问题，即每个学生都有一个添加按钮，这些按钮在html页面中列出（这是使用php从数据库中选择完成的），当我按下每个学生的添加按钮时，我在警报框中获得未定义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> 

的jQuery的流汗学生姓名的值是

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

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

}); 

个

closest('div#studname')搜索父格在DOM heirachy与ID studname

find('p#nameOfStud')搜索在早期DOM树p标签后裔搜索格。

.text()获取段落标记内的文本

Answer 2

不能有多个ID jQuery中。 ID是唯一的。 尝试以下操作：

更改<p>元素如下：

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

更改您的 '按钮' 如下：

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

那就试试下面的代码：

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