有关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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
Javascript中的arguments对象
Jun 20 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 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
openPNE常用方法分享
2011/11/29 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP 转义使用详解
2013/07/15 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
给Python入门者的一些编程建议
2015/06/15 Python
python交互界面的退出方法
2019/02/16 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
质检部职责
2013/12/28 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
物业前台接待岗位职责
2015/04/03 职场文书