有关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基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
js的2种继承方式详解
Mar 04 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
JS实现多功能计算器
Oct 28 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
微信小程序scroll-view不能左右滑动问题的解决方法
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实现获取文件mime类型的方法
2015/02/11 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
package.json文件配置详解
2017/06/15 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
判断网页编码的方法python版
2016/08/12 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
基于Python List的赋值方法
2018/06/23 Python
python openpyxl使用方法详解
2019/07/18 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
工程技术员岗位职责
2014/03/02 职场文书
成绩单家长评语大全
2014/04/16 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
职工年度考核评语
2014/12/31 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Python安装使用Scrapy框架
2022/04/12 Python