jQuery ListView 自动分隔符将 id 添加到每个部分

标签 jquery jquery-mobile

我正在使用 jQuery ListView 显示一个列表,其中包含按第一个字符分组的客户姓名, 这是我的代码:

<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
  <h2>My Phonebook</h2>
  <ul data-role="listview" data-autodividers="true" data-inset="true">
    <li><a href="#">Adele</a></li>
    <li><a href="#">Agnes</a></li>
    <li><a href="#">Albert</a></li>
    <li><a href="#">Billy</a></li>
    <li><a href="#">Bob</a></li>
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Cameron</a></li>
    <li><a href="#">Chloe</a></li>
    <li><a href="#">Christina</a></li>
    <li><a href="#">Diana</a></li>
    <li><a href="#">Gabriel</a></li>
    <li><a href="#">Glen</a></li>
    <li><a href="#">Ralph</a></li>
    <li><a href="#">Valarie</a></li>
  </ul>
  </div>
</div> 

</body>
</html>

我希望能够导航到每个部分,但是此方法不会自动向每个部分添加 id,是否可以以编程方式向每个部分添加 id(例如 id=a、id= g等)?

最佳答案

使用下面的jquery代码,但在为ul提供一些ID之前(这里我给出了“list_ul”)

<ul data-role="listview" data-autodividers="true" data-inset="true" id="list_ui">

代码:

$( document ).on( "pageinit", "#pageone", function( event ) {
    var arr1 = [];
    $("#list_ul").find('.ui-li-divider').each(function() {
        arr1.push($( this ).text());
    });
    var i=0;
    $('.ui-li-divider').each(function() {
        $( this ).attr( "id",arr1[i++]);
    });
    return false;   
});

关于jQuery ListView 自动分隔符将 id 添加到每个部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24393702/

相关文章:

javascript - Quora 在 Jquery Mobile 中样式化了 "add content"图标

android - 如何处理 HTML5 Web 应用程序中的旋转?

jquery - 从 jquery CLEditor 获取内容

javascript - 如何使用混合类型的 jquery 从表单中获取所有元素和值

所有页面的 jQuery Mobile 全局弹出窗口

ios - 在iOS中将XML转换为JSON

jquery - 如何创建一个 jQuery Mobile 的 Popup Alert 机制?

javascript - 如何使用 jQuery 反转悬停状态?

jquery - 如何设置 jquery ui 组合框选定值或默认文本?

javascript - Angular 2跨应用程序(根组件)通信