有关jQuery中parent()和siblings()的小问题


Posted in Javascript onJune 01, 2016

今天发现一个小问题,现在也不知道到底是哪个梗在作祟,但是感觉是parent()和siblings()其中的一个。

  我是想这样的根据输入的条件删选内容:

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="https://cdn.bootcss.com/weui/0.4.2/style/weui.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<script>
$(function(){
var coding = "CODING";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>
</head>
<body>
<div class="weui_cells weui_cells_access search_show" id="search_show" style="diplay:none;">
<div class="weui_cell ">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch">CODING</a>
</div>
</div>
<div class="weui_cell bolSearch">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >WW11JS0261</a>
</div>
</div>
<div class="weui_cell ">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >OTHER</a>
</div>
</div>
<div class="weui_cell ">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >LITER</a>
</div>
</div>
<div class="weui_cell ">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >POST</a>
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >WW11JM042222</a>
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch">WW11JM031855</a>
</div>
</div>
</div> 
</body>
</html>

 上面这个没问题:

搜索条件为存在:“COIDNG”(如下)的内容,在浏览器里也结结实实的展现出来了。

<script>
$(function(){
var coding = "CODING";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>

但是,我把条件改为WW11时(如下),按我自己理解来讲,属于WW11的最后2个内容应该显示出来,但是什么都不出来?神马情况?

<script>
$(function(){
var coding = "WW11";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>

接着,再改搜索条件,把WW11改为WW11JM031也就是说这个条件是唯一的,不重复的。

没事了,选取的条件可以再次显示出来了。

接着,我又把条件WW11JM031改回WW11,同时

$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();

改为

$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show();

就达到我想显示出来的所有内容了。虽然内容满足了,但是显示又不满足我的要求了。

最后还是绕了一路,把样式改了。

但是这个梗还是没绕过去,不明白为什么只能筛选出唯一的条件。

Javascript 相关文章推荐
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
js实现一个简易计算器
Mar 30 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 #Javascript
星期几的不同脚本写法(推荐)
Jun 01 #Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 #Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 #Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 #Javascript
深入理解node exports和module.exports区别
Jun 01 #Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php实现文件预览功能
2017/05/23 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
高中毕业生个人自我鉴定
2013/11/24 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
《钱学森》听课反思
2014/03/01 职场文书
教师求职自荐书
2014/06/14 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
公司宣传语大全
2015/07/13 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js