有关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之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php数组删除元素示例
2014/03/21 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
CI框架常用函数封装实例
2016/11/21 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python实现Zabbix-API监控
2018/09/17 Python
python绘制简单彩虹图
2018/11/19 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
2014年会演讲稿范文
2014/01/06 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
优秀教师单行材料
2014/12/16 职场文书
担保书范文
2015/01/20 职场文书
导游词欢迎词
2015/02/02 职场文书
单位考核鉴定意见
2015/06/05 职场文书