为了能够使用这个真棒插件：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项和
之前 在A项之后 </li></ul>，（和每个现有的第一个字母相同），我是对的吗？
现在是我不知道在前端使用jquery或者如果我可以在服务器上使用php进行此操作
我使用一个简单的查询生成我的标记：'从城市顺序中选择名称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;
}
答案 0 :(得分：2)
我没有测试过这个，所以考虑一下psuedo-code，但它应该给你一个很好的起点。我们的想法是检查每一行的第一个字母，如果它与上一行的第一个字母不同，则发出新的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;
}
答案 1 :(得分：0)
假设你可能想要将基本数据传递给客户端而不在php中生成标记，你可以这样做：
encode_json($results)转储它，这将提供如下内容：// title, wiki-link, x-coord, y-coord
var data =
[["Amsterdam", "Amsterdam", 747, 290],
["Barcelona", "Barcelona", 747, 290],
...
]
我已经添加了wiki-link以防万一它不是标题;）
现在使用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生成。