有关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 图片预览效果 推荐
Dec 22 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
JS实现多选框的操作
Jun 24 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 array_intersect()函数使用代码
2009/01/14 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python基础知识小结之集合
2015/11/25 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
应届生求职信范文
2014/06/30 职场文书