php - 添加一个额外的
与项目值的每个现有首字母

Question

为了能够使用这个很棒的插件：Jquery iphone contacts

我需要更新我现有的标记（普通列表）：

<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Barcelona"><strong>Barcelona</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Sevilla"><strong>Sevilla</strong>747,290</a></li>
             <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Cadiz"><strong>Cadiz</strong>747,290</a></li>
   </ul>
</div>

进入（添加导航指标）：

<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
      <li>
        <div id="nav-indicator-fixed"></div>
        <a name="A"></a>
      <div class="nav-indicator" id="nav-a">A</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Arnhem" title="Arnhem"><strong>Arnhem</strong>144,101</a></li>
            <!-- More info here -->
         </ul>
      </li>
      <li>
        <a name="B"></a>
      <div class="nav-indicator" id="nav-b">B</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Bolsward" title="Bolsward"><strong>Bolsward</strong>9,607</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Buren" title="Buren"><strong>Buren</strong>25,644</a></li>
            <!-- More info here -->
         </ul>   
      </li>
   </ul>
</div>

所以我必须要

添加：

 <div id="nav-indicator-fixed"></div>
            <a name="A"></a>
          <div class="nav-indicator" id="nav-a">A</div>
          <ul>

A 项之前和

</li></ul>在 A 项目之后，（并且与每个现有的第一个字母相同），对吗？

现在是当我不知道在前端使用 jquery 或者我是否可以在服务器中使用 php 时

我用一个简单的查询生成我的标记：'select name from citys order by name desc'

你将如何以及在哪里做？

（实际上插件不应该具有该功能¿）

-编辑-

请求了php代码：

function nube_ingredientes($limit = 50){
    $query = "SELECT count(*) as num, nombre FROM ciudades WHERE GROUP BY nombre ORDER BY num DESC LIMIT $limit";

    $result = mysql_query($query);
        $html .= '<div class="content">';

            $html .=    '<ul>';
                while($taginfo = mysql_fetch_row($result)){
                     $numtags = $taginfo[0];
                     $tagname = $taginfo[1];
                     $tagurl = urlencode($tagname);
                     $tagsize = 9 + intval($numtags)*2;
                     $bla = 'get_items("'.str_replace(' ','-',$tagname).'")';
                     $tagname = str_replace('-', ' ', $tagname);
                      $html.= "<li><a href='#router' onclick='$bla' c='$numtags'>$tagname</a></li> "."\n";

                }
        $html .=    '</ul>
                  </div>';

        echo $html;
 }

score 2 · Accepted Answer

我还没有测试过这个，所以考虑它是伪代码，但是它应该给你一个很好的起点。这个想法是检查每行的第一个字母，如果它与前一行的第一个字母不同，则发出新的 HTML 代码。最好总是尽可能接近最终的 HTML 代码。所以这个解决方案不需要对前端进行复杂的更改。

function nube_ingredientes($limit = 50){
$query = "SELECT count(*) as num, nombre FROM ciudades WHERE GROUP BY nombre ORDER BY num DESC LIMIT $limit";

$result = mysql_query($query);
    $html .= '<div class="content">';
        $html .=    '<ul>';
            while($taginfo = mysql_fetch_row($result)){
                 $numtags = $taginfo[0];
                 $tagname = $taginfo[1];
                 $tagurl = urlencode($tagname);
                 $tagsize = 9 + intval($numtags)*2;
                 $bla = 'get_items("'.str_replace(' ','-',$tagname).'")';
                 $tagname = str_replace('-', ' ', $tagname);
                 $thisChar = strtoupper(substr($tagname, 0, 1)); //Added by msigman
                 if($lastChar != $thisChar);//Added by msigman
                 {
                    $html .= "<li><div id='nav-indicator-fixed'></div>
                    <a name='$thisChar'></a>
                    <div class='nav-indicator' id='nav-$thisChar'>$thisChar</div>
                    <ul>"; //Added by msigman
                  }
                 $html.= "<li><a href='#router' onclick='$bla' c='$numtags'>$tagname</a></li> "."\n";
                 if($lastChar != $thisChar); //Added by msigman
                 {
                    $lastChar = $thisChar; //Added by msigman
                    $html .= "</li></ul>"; //Added by msigman
                 }
            }
    $html .=    '</ul></div>';
    echo $html;

}

score 0 · Accepted Answer

假设您可能希望将基本数据传递给客户端而不在 php 中生成标记，您可以这样做：

确保您的服务器以紧凑的形式提供数据。正如您所说，您的数据来自 SQL 查询，我假设您可以轻松地将其转储encode_json($results)到 PHP 中，这将提供如下内容：

// title, wiki-link, x-coord, y-coord
var data =
  [["Amsterdam", "Amsterdam", 747, 290],
   ["Barcelona", "Barcelona", 747, 290],
   ...
  ]

我添加了 wiki 链接，以防它不是标题；）

现在使用 jQuery 和underscore.js，你可以用几行代码生成你的内容：

// group your data by the first letter of the title
var grouped = _.groupBy(data, function(row) { 
  // row[0] is the title
  return row[0].substring(0, 1)
})
// generate the header
var letters = _.keys(grouped)
var header = $('<ul>', { id: 'iphone-search' })
_.each(letters, function(letter) {
  $('<a>', { href: '#' + letter, title: letter }).html(letter).appendTo(header)
})

// the scroll body
var scrollBody = $('<ul>', { id: 'iphone-scroll' })
_.each(letters, function(letter) {
  var li = $('<li>')
  // create the navigational anchor
  $('<a>', { name: letter }).appendTo(li)

  // create the div to put the ul/li... on
  var div = $('<div>', { 
    'class': 'nav-indicator',
    'id': 'nav-' + letter.toLowerCase()
  }).appendTo(li)
  var ul = $('<ul>').appendTo(div)
  _.each(grouped[letter], function(group) {
    // now, for each element within the group
    // create the <li><a>...</a></li> content
    $('<li>').append(
      $('<a>', {
        title: group[0],
        href: 'http://en.wikipedia.org/wiki/' + group[1] // the wiki-link
      }).append(
        $('<strong>').html(group[0])
      ).append(
        $('<span>').html(group[2] + ', ' + group[3])
      )
    ).appendTo(ul)
  })      
})

// now you can join them in the container
var container = 
  $('<div>', { id: 'iphone-scrollcontainer'}).append(header).append(scrollBody)

那应该只产生您想要的 html ;) 最后一部分看起来有点乱，但至少它的样式与所有元素仅由 jQuery 生成的样式相同。

php - 添加一个额外的与项目值的每个现有首字母

2 回答 2

Related

Reference

php - 添加一个额外的
与项目值的每个现有首字母