有关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 confirm选择判断
Oct 18 Javascript
日期 时间js控件
May 07 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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+DBM的同学录程序(3)
2006/10/09 PHP
php数组去重的函数代码
2013/02/03 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
基于Python的接口测试框架实例
2016/11/04 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python在每个字符后添加空格的实例
2018/05/07 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
金智子午JAVA面试题
2015/09/04 面试题
Shell如何接收变量输入
2012/09/24 面试题
项目经理任命书范本
2014/06/05 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
龙门石窟导游词
2015/02/02 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
python元组打包和解包过程详解
2021/08/02 Python