在jquery

Question

我在div中有一个表，想获取父div的 data-diet_for ，其中该类是jquery的 row

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>

这给了我undefined的输出 而使用$(this).closest('.card').find('.row').attr('data-diet_for')则提供绝对输出 那为什么第一个代码不起作用

Answer 1

它工作正常。

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

您的代码正在运行
您不应该返回值，因为您不在function内。
您可以将值记录在console.log()内或对其进行其他操作。

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>