有关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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
在js中修改html body的样式
Nov 11 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 使用file_get_contents读取大文件的方法
2014/11/13 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JavaScript中string对象
2015/06/12 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
python 布尔操作实现代码
2013/03/23 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python列表list保留顺序去重的实例
2018/12/14 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python 追踪except信息方式
2020/04/25 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
活动总结结尾怎么写
2014/08/30 职场文书
营业员岗位职责
2015/02/11 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
聘任书格式及范文
2015/09/21 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书