有关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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
canvas绘制七巧板
Feb 03 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
如何制作自己的原生JavaScript路由
May 05 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语法(4)
2006/10/09 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python 描述符(Descriptor)入门
2016/11/20 Python
python创建文件备份的脚本
2018/09/11 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
python实现列表的排序方法分享
2019/07/01 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python读写csv文件的方法
2019/08/13 Python
python如何基于redis实现ip代理池
2020/01/17 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
如何用SQL语句进行模糊查找
2015/09/25 面试题
学院书画协会部门职责
2013/11/28 职场文书
大门门卫岗位职责
2013/11/30 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers