Блог

Главная - Вопросы по программированию - индексная функция jquery, повторяющая содержимое для других элементов на странице

индексная функция jquery, повторяющая содержимое для других элементов на странице

#jquery #html

#jquery #HTML

Вопрос:

У меня есть несколько таблиц, созданных из divs (по соображениям реагирования) на одной странице.

Затем я использую jquery для создания атрибута данных из заголовка таблицы, который добавляется в каждую ячейку таблицы. Этот атрибут данных позже используется в CSS content: attr(data-title); , когда экран достигает 720 пикселей в качестве заголовка для каждой ячейки в таблице.

Моя проблема возникает, когда у меня есть несколько таблиц 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>

Ответ №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();
    });    
});

Комментарии:

1. Спасибо, абсолютно идеально.