搜索项目列表以查找具有特定属性内容的特定项目
搜索项目列表以查找具有特定属性内容的特定项目
提问于 2014-03-24 00:29:03
我有一份物品清单。每个LI中都有一个名为data-index的自定义属性。
我希望搜索所有条目，并找到属性中存在特定字符串的每个条目。
我在这里包括了所有的东西。有什么建议吗？我的方向对吗？
我的期望是，如果我搜索bg19，在console.log中只能得到一个报告。我每次都会得到10分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>A selectable list</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js" ></script>
<style>
.hidden {
display:none;
}
.show {
display:block;
}
</style>
<script>
$(document).ready(function() {
$('#id-submit').on('click', $(this), function() {
var userId = $('#user-id').val();
$('#user-app-list').children('li').attr('data-index', userId).each(function() {
console.log('Here we go');
});
event.preventDefault();
});
});
</script>
</head>
<body>
<h3>To select your library, enter your ID number and click submit.</h3>
<form>
<input type="text" value="" placeholder="Enter ID Here" id="user-id">
<input type="submit" value="Submit" id="id-submit">
</form>
<ul id="user-app-list">
<li data-index="cd123 cd124 cd125 bg12 bg19 bg20" class="hidden">
<h3><a href="http://apple.com">Apple</a></h3>
</li>
<li data-index="cd127 cd128 cd130 bg12" class="hidden">
<h3><a href="http://amazon.com">Amazon</a></h3>
</li>
<li data-index="cd121 cd119 cd125 bg12" class="hidden">
<h3><a href="http://google.com">Google</a></h3>
</li>
<li data-index="cd123 cd124 cd125 bg12 bg20" class="hidden">
<h3><a href="http://youtube.com">YouTube</a></h3>
</li>
<li data-index="cd123 cd124 cd125 bg12 bg20" class="hidden">
<h3><a href="http://vimeo.com">Vimeo</a></h3>
</li>
<li data-index="cd127 cd127 cd120 bg12 bg20" class="hidden">
<h3><a href="http://ebay.com">Ebay</a></h3>
</li>
<li data-index="cd127 cd119 cd118 bg12 bg20" class="hidden">
<h3><a href="http://craigslist.org">Craigslist</a></h3>
</li>
<li data-index="cd128 cd127 cd130 bg12 bg20" class="hidden">
<h3><a href="http://inside.com">Inside</a></h3>
</li>
<li data-index="cd129 cd119" class="hidden">
<h3><a href="http://cnn.com">CNN</a></h3>
</li>
<li data-index="cd130 cd118 cd125 bg12 bg20" class="hidden">
<h3><a href="http://bbc.com">BBC</a></h3>
</li>
</ul>
<p>Test with any of the following: cd118, cd119, cd120, cd121, cd123, cd124, cd125, cd127, cd128, cd129, cd130, bg12, bg19, bg20</p>
</body>
</html>回答 2
Stack Overflow用户
发布于 2014-03-24 00:31:28
您需要使用像$('#user-app-list').children('li[data-index~="'+userId+'"]')这样的attribute contains word selector。
Attribute Contains Word Selector
选择具有指定属性的元素，这些元素的值包含一个由空格分隔的给定词。
$(document).ready(function () {
$('#id-submit').on('click', $(this), function () {
var userId = $('#user-id').val();
$('#user-app-list').children('li').hide().filter('[data-index~="' + userId + '"]').show();
event.preventDefault();
});
});演示：Fiddle
您要做的是设置data-index属性的值
Stack Overflow用户
发布于 2014-03-24 01:25:25
http://jsfiddle.net/PjLzH/
$(document).ready(function() {
$('form').submit(function() {
var userId = $('#user-id').val();
$("#user-app-list li[data-index~='" + userId + "']").each(function(event) {
console.log('Here we go');
});
event.preventDefault();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22593612
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号