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>

我只是熟悉w / php，有些熟悉w / 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

这是一个艰难的调用 - <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>';
}
?>

Answer 2

在生成列表时，最好在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'元素，设置其名称参数，并在我们检查的h1之前将其插入到dom中。

在动态内容页面中动态添加名称锚标记

2 个答案: