Как добавить в тело html нумерацию блоков?

238

21 февраля 2018, 09:19

Доброго времени суток. Имеется конструкция вида:

<div class="block"> 
  <ul> 
    <li> 
      <a href="#id1">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id2">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id3">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id4">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id5">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
  </ul> 
</div>

Необходимо, подсчитать сколько li классов находится в ul и каждому li классу вывести его порядковый номер в meta который находится внутри. Задать обычным list-style или ::before не подойдет - нужен вывод непосредственно в тело документа для полноценной индексации поисковиками.

Answer 1

$(document).ready(function() { 
  var liNum = 1; 
  $(".block ul li").each(function() { 
    $(this).children("meta").attr("content", liNum); 
    liNum++; 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <ul> 
    <li> 
      <a href="#id1">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id2">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id3">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id4">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
    <li> 
      <a href="#id5">Блок</a> 
      <meta content="здесь номер Li"> 
    </li> 
  </ul> 
</div>

Answer 2

На серверной стороне считайте и формируйте html. Как-то так (на сервере должен быть установлен php):

<? $i=1; ?> 
<div class="block"> 
  <ul> 
    <li> 
      <a href="#id1">Блок</a> 
      <meta content="<? echo($i); $i++; ?>"> 
    </li> 
    <li> 
      <a href="#id2">Блок</a> 
      <meta content="<? echo($i); $i++; ?>"> 
    </li> 
    <li> 
      <a href="#id3">Блок</a> 
      <meta content="<? echo($i); $i++; ?>"> 
    </li> 
    <li> 
      <a href="#id4">Блок</a> 
      <meta content="<? echo($i); $i++; ?>"> 
    </li> 
    <li> 
      <a href="#id5">Блок</a> 
      <meta content="<? echo($i); $i++; ?>"> 
    </li> 
  </ul> 
</div>