有关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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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变量内存分配问题记录整理
2013/11/27 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
立志成才演讲稿
2014/09/04 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技