如何过滤列表视图中的内部子元素以及使用 Jquery 在移动应用程序中将字母滚动条添加到列表视图的任何简单方法
Posted
技术标签:
【中文标题】如何过滤列表视图中的内部子元素以及使用 Jquery 在移动应用程序中将字母滚动条添加到列表视图的任何简单方法【英文标题】：How to filter Inner child elements in List view & also any easy way to Add Alphabetical Scroll Bar to List View in an Mobile App Using Jquery 【发布时间】：2018-10-24 21:09:25 【问题描述】：我正在使用 jQuery 创建一个移动应用程序，当单击任何字母时，我有一个按字母顺序排列的滚动条，它会在列表视图中显示所有元素。
如果我点击 R，它会将我带到带有 R 的所有项目的列表，但我的问题是如果 R 的列表太大并且我想从 R 中搜索任何特定项目，那么该怎么做？ 另外如何轻松创建按字母顺序排列的滚动条？
这是我的代码：
$.mobile.document.on("pagecreate", "#demo-page", function()
var head = $(".ui-page-active [data-role='header']");
$.mobile.document.on("click", "#sorter li", function()
var top,
letter = $(this).text(),
search = $("[data-filter='true']"),
divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + search + ")");
if (divider.length > 0)
top = divider.offset().top;
$.mobile.silentScroll(top);
else
return false;
);
$("#sorter li").hover(function()
$(this).addClass("ui-btn").removeClass("ui-li-static");
, function()
$(this).removeClass("ui-btn").addClass("ui-li-static");
);
);
$(function()
$.mobile.window.on("scroll", function(e)
var headTop = $(window).scrollTop(),
foot = $(".ui-page-active [data-role='footer']"),
head = $(".ui-page-active [data-role='header']"),
headerheight = head.outerHeight();
if (headTop < headerheight && headTop > 0)
$("#sorter").css(
"top": headerheight + 15 - headTop,
"height": window.innerHeight - head[0].offsetHeight + window.pageYOffset - 10
);
$("#sorter li").height("3.3%");
else if (headTop >= headerheight && headTop > 0 && parseInt(headTop +
$.mobile.window.height()) < parseInt(foot.offset().top))
$("#sorter").css(
"top": "60px",
"height": window.innerHeight - 8
);
$("#sorter li").height("3.3%");
else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top) &&
parseInt(headTop + window.innerHeight) <= parseInt(foot.offset().top) +
foot.height())
$("#sorter").css(
"top": "60px",
"height": window.innerHeight - (parseInt(headTop + window.innerHeight) -
parseInt(foot.offset().top) + 8)
);
else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top))
$("#sorter").css(
"top": "60px"
);
else
$("#sorter").css("top", headerheight + 15);
);
);
$.mobile.window.on("throttledresize", function()
$("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
);
$.mobile.document.on("pageshow", "#demo-page", function()
var headerheight = $(".ui-page-active [data-role='header'] [data-filter='true']").outerHeight();
$("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
);h1
font-size: 14pt;
color: #E76C67;
margin-top: 0%;
h2
font-size: 12pt;
color: #444444;
margin-top: -3%;
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="demo-page" data-url="demo-page">
<div data-role="header">
<h1>Gospel Songs </h1>
<a href="#" id="home" data-icon="home" data-iconpos="notext"> Home</a>
<a href="#" class="jqm-search-link ui-shadow ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div>
<div role="main" class="ui-content">
<div id="sorter">
<ul data-role="listview">
<li><span>A</span></li>
<li><span>B</span></li>
<li><span>C</span></li>
<li><span>D</span></li>
<li><span>E</span></li>
<li><span>F</span></li>
<li><span>G</span></li>
<li><span>H</span></li>
<li><span>I</span></li>
<li><span>J</span></li>
<li><span>K</span></li>
<li><span>L</span></li>
<li><span>M</span></li>
<li><span>N</span></li>
<li><span>O</span></li>
<li><span>P</span></li>
<li><span>Q</span></li>
<li><span>R</span></li>
<li><span>S</span></li>
<li><span>T</span></li>
<li><span>U</span></li>
<li><span>V</span></li>
<li><span>W</span></li>
<li><span>X</span></li>
<li><span>Y</span></li>
<li><span>Z</span></li>
</ul>
</div>
<!-- /sorter -->
<ul data-role="listview" data-autodividers="true" id="sortedList" data-filter="true">
<li>
<a href="#">
<h1>All The Way My Saviour Leads Me lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Amazing Grace lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>As He Meant It To Be lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>At My Door lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>At Times Like These lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>At The Foot Of The Cross (Ashes To Beauty) </h1>
</a>
</li>
<li>
<a href="#">
<h1>Bring Back My Best Friend lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Be Still </h1>
</a>
</li>
<li>
<a href="#">
<h1> Beauty For Ashes</h1>
</a>
</li>
<li>
<a href="#">
<h1> Before You I Kneel (A Worker's Prayer)</h1>
</a>
</li>
<li>
<a href="#">
<h1>Cantate Domino lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> Christ Is Enough</h1>
</a>
</li>
<li>
<a href="#">
<h1>Counting On God Lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Cry Of The Broken </h1>
</a>
</li>
<li>
<a href="#">
<h1>Create in me a clean hear </h1>
</a>
</li>
<li>
<a href="#">
<h1> Days Of Elijah</h1>
</a>
</li>
<li>
<a href="#">
<h1>Deep In Love With You Lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Depth of Mercy </h1>
</a>
</li>
<li>
<a href="#">
<h1>Everlasting Love </h1>
</a>
</li>
<li>
<a href="#">
<h1>Fix it jesus</h1>
</a>
</li>
<li>
<a href="#">
<h1>God Blesses Me Everyday Lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> God Was Walking With Me lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> God Will Smile Up Above lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Have Some Mercy On Me lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> He Made Me Whole lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> He Will Hear Your Cry lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> He's Changed My Outlook lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Heaven Will Be Our Reward lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Here I Am To Worship lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Hey yo 123 lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> I know who I am lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>I lift my hands to you lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>I Say Praise To The Lord lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>I Still Pray My Soul Will Be Saved lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>I Want Two Wings To Veil My Face lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> I Will Overcome lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Jesus, All For Jesus lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> Let It Rise lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Love Lives On lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> Matthew Twenty-four (Is Knocking At The Door) lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Our Bridges Are Burned lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> Our Faith lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Praise lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> Praise on the inside lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> Reach Out To The Lord lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Sending Up My Timber lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Servent;s heart lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Sharin' Love (Never Hurt No One) lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> Should We Give Less Than God lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Since God Made Men lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>So Much To Thank Him For lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Thank God For Memories lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Thankful And Glad lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>The Dream lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>The Good Book lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> The Hypocrite lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> The Lord Sent Me His Love lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>The Rivers Edge lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>The Savior Of All Men lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Their Gift Came From Him lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Until The Day I Found Him lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Unending Love lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Unto The One </h1>
</a>
</li>
<li>
<a href="#">
<h1> Victory In Jesus Lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Voice of Truth</h1>
</a>
</li>
<li>
<a href="#">
<h1> Victorious God </h1>
</a>
</li>
<li>
<a href="#">
<h1>We Bring The Sacrifice Of Praise lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1> We Should Feel Blessed lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> What A Cross He Had To Bear lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1> When God Speaks To Us lyrics</h1>
</a>
</li>
<li>
<a href="#">
<h1>Whenever I Fall lyrics </h1>
</a>
</li>
<li>
<a href="#">
<h1>Yahweh </h1>
</a>
</li>
<li>
<a href="#">
<h1>Yes and Amen </h1>
</a>
</li>
<li>
<a href="#">
<h1> You Alone</h1>
</a>
</li>
<li>
<a href="#">
<h1> You Amaze Us</h1>
</a>
</li>
<li>
<a href="#">
<h1>You are holy </h1>
</a>
</li>
<li>
<a href="#">
<h1>Your Great Name </h1>
</a>
</li>
<li>
<a href="#">
<h1><span id='display_song_name'></span> </h1>
</a>
</li>
</ul>
</div>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home"> Home </a></li>
<li><a href="index.html" data-icon="grid">Photos</a></li>
<li><a href="#add_song" data-icon="plus" data-transition="flip" id="#add_song"> Add Song </a> </li>
</ul>
</nav>
</footer>
</div>【问题讨论】：
【参考方案1】：您可能会从https://jqueryui.com/autocomplete/ 那里得到想法。 它使用对象来存储列表信息。
【讨论】：
以上是关于如何过滤列表视图中的内部子元素以及使用 Jquery 在移动应用程序中将字母滚动条添加到列表视图的任何简单方法的主要内容，如果未能解决你的问题，请参考以下文章
如何通过文本框过滤数据表视图中的子表单？ #likeoperator #where 子句
如何在android中的简单列表视图上使用startsWith应用搜索过滤器
bigQuery 和 GA-Premium 集成：从 GA 中的未过滤视图导出数据时，如何在 bigQuery 中使用 IP 过滤器（以排除内部流量）