динамически добавлять тег привязки имени на странице динамического содержимого

Question

У меня есть страница, которая содержит более 100 элементов, и мне нужно динамически добавлять теги name = "" в начало каждого нового раздела элементов, который начинается со следующего алфавита.

Например:

<a name="a"></a>
<h1>Amazon River</h1>

<h1>Arrow Heads</h1>

<a name="b"></a>
<h1>Bear Claws</h1>

<h1>Bee Traps</h1>

<h1>Dodge Ball</h1>

<a name="f"></a>
<h1>Football Players</h1>

<h1>Fig Newtons</h1>

....

<a name="y"></a>
<h1>Yorktown</h1>

<h1>Yikes</h1>

<a name="z"></a>
<h1>Zebra</h1>

<h1>Zoo Mobile</h1>

Я только знакомый с php, несколько знакомый с javascript, не уверен, что для этого потребуется.

Я напишу «код» в теории, так что у вас есть представление о том, чего я хочу достичь

$letter = range(a-z);

if($title == first_letter_character($letter)) {
   print '<a name="'.$letter.'"></a>';
   $letter++; // goes to next letter in range
}

Кроме того, могут быть некоторые буквы, которые могут не иметь элемента.

Любая помощь приветствуется.

Answer 1

Определенно лучше выводить такие вещи в PHP, пока генерируется список. Таким образом, он гарантированно присутствует и доступен на стороне клиента. Вставка Javascript будет работать, но если у клиента это отключено, вы не можете обойти это.

При этом, вот как вы можете сделать это в Javascript, используя mootools (jquery будет построен аналогично). Предполагая, что теги h1 являются единственными на странице, на которых мы должны выполнить вставку 'a', вы должны сделать:

var lastletter = null, firstletter, a;
$$('h1').each(function(el) {
    firstletter = el.get('text').substr(0,1).toUpperCase();
    if (firstletter != lastletter) {
        a = new Element('a', { 'name': firstletter }).inject(el, 'before');
    }
});

В псевдокоде: захватить все элементы h1. Зациклите результаты и извлеките заглавную копию первой буквы каждого текстового содержимого h1. Если эта буква не совпадает с последней буквой, то создайте элемент 'a', установите его параметр name и вставьте его в dom непосредственно перед проверкой h1.

Answer 2

Это сложный вызов - <a name="D"></a> не добавляет семантически целого в документ, поэтому я хотел бы выполнить его в Javascript и сохранить базовую разметку в чистоте. Тем не менее, результирующая функциональность yoursite.com/directory#D должна работать без JS, поэтому использование JS для включения кажется плохим вариантом. В конце я бы включил теги в разметку через PHP, который является моим по умолчанию, когда сомневаешься.

Полагаю, у вас есть что-то вроде этого, распечатка ваших вещей

<?php
$items = array(......); // populated via database?

foreach ($items as $item) {
  echo '<a href="<?= $item->url ?>"><?= htmlentities($item->name) ?></a>
}
?>

Я бы сделал следующие модификации

<?php
$items = array(......); // populated via database?

$last_letter = 0;

foreach ($items as $item) {
  $letter = strtoupper($item->name[0]); // capitalized first letter
  if ($letter != $last_letter) {
    // not the same letter as last item
    echo '<a name="', $letter, '"></a>'; // <a name="A"></a>
    $last_letter = $letter;
  }

  echo '<a href="', $item->url, '">', htmlentities($item->name), '</a>';
}
?>