有关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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
js 浏览器事件介绍
Mar 30 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
深入了解JavaScript 私有化
2019/05/30 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
药学专业个人自我评价
2013/11/11 职场文书
家长评语大全
2014/01/22 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
主要领导对照检查材料
2014/08/26 职场文书
三好学生评语大全
2014/12/29 职场文书
2014年个人年终总结
2015/03/09 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
python字符串的一些常见实用操作
2022/04/06 Python