jquery index関数ページ上の他の要素の内容を繰り返す

Question

1つのページで（応答的な理由で）複数のテーブルを作成しました。

次に、jqueryを使用して、各表のセルに追加される表のヘッダーからデータ属性を作成します。そのデータ属性は後でCSS content: attr(data-title);で使用され、画面がテーブル内の各セルのタイトルとして720pxに達したときに使用されます。

私の問題は、複数の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(); 
    });  
});