Question

我在一个页面上创建了由div创建的多表（出于响应原因）。

然后我使用jquery从表头创建一个数据属性，该属性被添加到每个表格单元格中。当屏幕达到720px作为表格中每个单元格的标题时，该数据属性稍后将在CSS content: attr(data-title);中使用。

当我有多个div表时，我的问题出现了，第一个表的标题应用于所有可见的表格单元格。

请参阅下面的示例

我想知道是否有办法让jquery函数将第一个表中的标题内容仅应用于该单个表中的每个表格单元格。那么下表也只会收到它的表头内容等等......

var $table_header = $('.tech-specs header.table-row .table-cell');
var $table_cell = $('.tech-specs div.table-row .table-cell:not(:empty)');
$table_cell.attr('data-title', function() {
  var i = $(this).index();
  return $table_header.eq(i).text();
});

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
header.table-row {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  background: #37bb1f;
}
.table-row > * {
  display: table-cell;
  padding: 20px 8px;
  position: relative;
  vertical-align: middle;
}
.table.seven-cells .table-cell {
  width: 25%;
}
/* DEMO STUFF */

div.table-row > *:before {
  content: attr(data-title)" : ";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>This table should add data-title="HEADER 1.X"</h4>
<div class="table tech-specs four-cells">
  <header class="table-row">
    <div class="table-cell">HEADER 1.1</div>
    <div class="table-cell">HEADER 1.2</div>
    <div class="table-cell">HEADER 1.3</div>
    <div class="table-cell">HEADER 1.4</div>
  </header>
  <div class="table-row">
    <div class="table-cell">CPU</div>
    <div class="table-cell">E3-1230</div>
    <div class="table-cell">E3-1231v3</div>
    <div class="table-cell">E3-1271v3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Cores (threads)</div>
    <div class="table-cell">4 (8)</div>
    <div class="table-cell">4 (8)</div>
    <div class="table-cell">4 (8)</div>
  </div>
</div>


<h4>This table should add data-title="HEADER 2.X"</h4>
<div class="table tech-specs four-cells">
  <header class="table-row">
    <div class="table-cell">HEADER 2.1</div>
    <div class="table-cell">HEADER 2.2</div>
    <div class="table-cell">HEADER 2.3</div>
    <div class="table-cell">HEADER 2.4</div>
  </header>
  <div class="table-row">
    <div class="table-cell">Cisco Powered</div>
    <div class="table-cell"><i class="fa fa-check"></i>
    </div>
    <div class="table-cell"><i class="fa fa-check"></i>
    </div>
    <div class="table-cell"><i class="fa fa-check"></i>
    </div>
  </div>
</div>


<h4>This table should add data-title="HEADER 3.X"</h4>
<div class="table tech-specs four-cells">
  <header class="table-row">
    <div class="table-cell">HEADER 3.1</div>
    <div class="table-cell">HEADER 3.2</div>
    <div class="table-cell">HEADER 3.3</div>
    <div class="table-cell">HEADER 3.4</div>
  </header>
  <div class="table-row">
    <div class="table-cell"><a href="#datacentre">100% owned London DC</a>
    </div>
    <div class="table-cell"><i class="fa fa-check"></i>
    </div>
    <div class="table-cell"><i class="fa fa-check"></i>
    </div>
    <div class="table-cell"><i class="fa fa-check"></i>
    </div>
  </div>
</div>

Answer 1

始终在外部父级的上下文中工作。 find()和closest()对于这种情况非常有用

$('.tech-specs').each(function(){
     var $table = $(this); // instance of table component

    // table instance specific elements     
    var $table_header = $table.find('header.table-row .table-cell');
    var $table_cell = $table.find('div.table-row .table-cell:not(:empty)');

    $table_cell.attr('data-title', function() {
      var i = $(this).index();
      return $table_header.eq(i).text();
    });    
});

jquery索引函数重复页面上其他元素的内容

1 个答案: