有关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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
深入理解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:风雨欲来 路在何方?
2006/10/09 PHP
php在线打包程序源码
2008/07/27 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
如何用Python徒手写线性回归
2021/01/25 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
个人对照检查材料
2014/02/12 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
实习班主任自我评价
2015/03/11 职场文书
八月迷情观后感
2015/06/11 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python