jQuery和PHP while循环php

Question

I have aa page that produces data from a while loop as follows:

echo "  <ul class=\"task-list\">
    <li>
      <div class=\"task-checkbox\">
          <input type=\"checkbox\" class=\"list-child\" value=\"\"  />
      </div>
      <div class=\"task-title\">
        <div class=\"request_hidden_id\" >$request_id</div>
          <span class=\"task-title-sp\">$request_summary</span>
          <span class=\"badge badge-sm label-success\">2 Days</span>
          <div class=\"pull-right hidden-phone\">
              <button class=\"btn btn-success btn-xs\"><i class=\" fa fa-check\"></i></button>
              <button class=\"btn btn-primary btn-xs\"><i class=\"fa fa-pencil\"></i></button>
              <button class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o \"></i></button>
  </div>
  </div>
</li>
</ul>

A jQuery that I need to reference the class( request_hidden_id ) value is as follows:

$( ".btn.btn-primary.btn-xs" ).click(function() {
  var acct_id = $('.request_hidden_id').text();
  alert( "are you sure you want to delete " + acct_id );
  $("#edit-service-request-modal").modal('show');
});

When the alert fires, all the id with the class given in the jQuery from the while loop shows in the alert box. Any ideas how to have it only reference the one selected? Thank you

Answer 1

You can use this to reference the element you clicked, then walk up the dom till you reach the .task-list container, then search the container for the current .request_hidden_id

$( ".btn.btn-primary.btn-xs" ).click(function() {
    var acct_id = $(this).closest('.task-list').find('.request_hidden_id').text();
    alert( "are you sure you want to delete " + acct_id );
    $("#edit-service-request-modal").modal('show');
});

Answer 2

Multiple elements will match $('.request_hidden_id') , that's why you're getting all of them. In order to get the one in the right scope, try something like this:

$( ".btn.btn-primary.btn-xs" ).click(function() {
    var acct_id = $(this).parents('.task-title').children('.request_hidden_id').text();
    alert( "are you sure you want to delete " + acct_id );
    $("#edit-service-request-modal").modal('show');
});