有关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 Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
js获取视频时长代码
Apr 10 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
jquery实现直播视频弹幕效果
Feb 25 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实现遍历多维数组的方法
2015/11/25 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Python 迭代器工具包【推荐】
2016/05/06 Python
Python中Threading用法详解
2017/12/27 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
主题教育活动总结
2014/05/05 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
春节超市活动方案
2014/08/14 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
学习普通话的体会
2014/11/07 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android