有关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 - 如何引入js代码
Mar 09 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php文件上传的简单实例
2013/10/19 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
Jquery ui css framework
2010/06/28 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Django继承自带user表并重写的例子
2019/11/18 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
《争吵》教学反思
2014/02/15 职场文书
调查研究项目计划书
2014/04/29 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
捐助倡议书
2015/01/19 职场文书
人才市场接收函
2015/01/30 职场文书
食堂管理制度范本
2015/08/04 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫