получение значения от ближайшей из нажатой кнопки

Question

Я пытаюсь сделать функцию управления профилем в том, что я хочу добавить тип пользователей, которые являются учениками для другого типа пользователей, это база данных учителя, для которой я использую i, используя 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 для gettting значение имени студента является

$(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') ищет родительского DIV в DOM heirachy с идентификатором studname

find('p#nameOfStud') поиски для р тегов потомков в DOM дереве ранее искали DIV.

.text() извлекает текст внутри тега абзаца

Answer 2

Вы не можете иметь несколько идентификаторов в JQuery. Идентификатор уникален. Попробуйте следующее:

Изменение <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); 
    }); 
});