在jquery中获取div的属性值

Question

I have a table in div and want to get data-diet_for of parent div where the class is row by jquery

 function table2json() { var details = []; $('.myTable tbody tr').each(function(i, e) { details[i] = { diet_for_id: $(this).closest('.row').attr('data-diet_for') }; }); return(details); } console.log(table2json);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body">
    <div class="card-title toggle d-flex justify-content-between" data-toggle="collapse" data-target="#breakfast">
      <strong>Breakfast <span id="breakfast_time"></span></strong>
      <span class="btn btn-sm">
                <i class="fas fa-fw fa-plus"></i>   
            </span>
    </div>
    <div class="row collapse" id="breakfast" data-diet_for="1">
      <div class="col-md-12 table-responsive">
        <table class="table myTable bg-white" style="width:100%" id="breakfast_table">
          <thead class="thead-light">
            <tr>
              <th>Dish</th>
              <th>Type</th>
              <th>Quantity</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              .....
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

This gives me undefined output while using $(this).closest('.card').find('.row').attr('data-diet_for') gives absolute output then why first code is not working

Answer 1

it works fine.

 var details = []; $('.myTable tbody tr').each(function(i, e) { details[i] = { diet_for_id: $(this).closest('.row').attr('data-diet_for') }; }); console.log(details)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-body"> <div class="card-title toggle d-flex justify-content-between" data-toggle="collapse" data-target="#breakfast"> <strong>Breakfast <span id="breakfast_time"></span></strong> <span class="btn btn-sm"> <i class="fas fa-fw fa-plus"></i> </span> </div> <div class="row collapse" id="breakfast" data-diet_for="1"> <div class="col-md-12 table-responsive"> <table class="table myTable bg-white" style="width:100%" id="breakfast_table"> <thead class="thead-light"> <tr> <th>Dish</th> <th>Type</th> <th>Quantity</th> <th>Action</th> </tr> </thead> <tbody> <tr> ..... </tr> </tbody> </table> </div> </div> </div> </div>

Answer 2

Your code is working
You should not return a value as you are not inside a function .
You can log the value inside a console.log() or do something else with it.

 var details = []; $('.myTable tbody tr').each(function(i, e) { details[i] = { diet_for_id: $(this).closest('.card').find('.row').attr('data-diet_for') }; }); console.log(details);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-body"> <div class="card-title toggle d-flex justify-content-between" data-toggle="collapse" data-target="#breakfast"> <strong>Breakfast <span id="breakfast_time"></span></strong> <span class="btn btn-sm"> <i class="fas fa-fw fa-plus"></i> </span> </div> <div class="row collapse" id="breakfast" data-diet_for="1"> <div class="col-md-12 table-responsive"> <table class="table myTable bg-white" style="width:100%" id="breakfast_table"> <thead class="thead-light"> <tr> <th>Dish</th> <th>Type</th> <th>Quantity</th> <th>Action</th> </tr> </thead> <tbody> <tr> ..... </tr> </tbody> </table> </div> </div> </div> </div>