有关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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
JS 遮照层实现代码
Mar 31 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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 金额数字转换成英文
2010/05/06 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JQUERY获取form表单值的代码
2010/07/17 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
require.js的用法详解
2015/10/20 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
c++工程师面试问题
2013/08/04 面试题
会议邀请函范文
2014/01/09 职场文书
C++程序员求职信范文
2014/04/14 职场文书
师范生自荐信模板
2014/05/28 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
创业计划书之宠物店
2019/09/19 职场文书