有關(guān)jQuery中parent()和siblings()的小問題
更新時(shí)間：2016年06月01日 11:21:16 作者：Moustache
本文通過一個(gè)實(shí)例給大家介紹有關(guān)parent()和siblings()問題原因及解決方案，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
今天發(fā)現(xiàn)一個(gè)小問題，現(xiàn)在也不知道到底是哪個(gè)梗在作祟，但是感覺是parent()和siblings()其中的一個(gè)。
我是想這樣的根據(jù)輸入的條件刪選內(nèi)容：
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 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>
上面這個(gè)沒問題：
搜索條件為存在：“COIDNG”（如下）的內(nèi)容，在瀏覽器里也結(jié)結(jié)實(shí)實(shí)的展現(xiàn)出來了。
<script>
$(function(){
var coding = "CODING";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>
但是，我把條件改為WW11時(shí)（如下），按我自己理解來講，屬于WW11的最后2個(gè)內(nèi)容應(yīng)該顯示出來，但是什么都不出來？神馬情況？
<script>
$(function(){
var coding = "WW11";
var coding=coding.toUpperCase();
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
})
</script>
接著，再改搜索條件，把WW11改為WW11JM031也就是說這個(gè)條件是唯一的，不重復(fù)的。
沒事了，選取的條件可以再次顯示出來了。
接著，我又把條件WW11JM031改回WW11，同時(shí)
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();
改為
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show();
就達(dá)到我想顯示出來的所有內(nèi)容了。雖然內(nèi)容滿足了，但是顯示又不滿足我的要求了。
最后還是繞了一路，把樣式改了。
但是這個(gè)梗還是沒繞過去，不明白為什么只能篩選出唯一的條件。
您可能感興趣的文章:
- jquery siblings獲取同輩元素用法實(shí)例分析
- jQuery中的siblings()是什么意思(推薦)
- 淺談jquery中next與siblings的區(qū)別
- jQuery siblings()用法實(shí)例詳解
- jquery遍歷函數(shù)siblings()用法實(shí)例
- jQuery中的siblings用法實(shí)例分析
- jQuery中siblings()方法用法實(shí)例
- jquery next nextAll nextUntil siblings的區(qū)別介紹
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 仿jQuery的siblings效果的js代碼
- jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例
相關(guān)文章
jQuery 實(shí)現(xiàn)圖片的依次加載圖片功能
本文分為css和js代碼兩部分給大家詳細(xì)介紹了jQuery 實(shí)現(xiàn)圖片的依次加載圖片功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-07-07
詳解Jquery實(shí)現(xiàn)ready和bind事件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)ready和bind事件的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了jquery插件實(shí)現(xiàn)掃雷游戲的第三篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了jQuery的基本概念與高級(jí)編程的簡(jiǎn)單介紹，有需要的小伙伴可以參考下。2015-05-05
jquery修改屬性值實(shí)例代碼(設(shè)置屬性值)
jQuery attr()方法用于設(shè)置/改變屬性值，下面的例子演示如何改變（設(shè)置）鏈接中 href 屬性的值2014-01-01
游戲力度條大家一定不陌生，在很多游戲中都能用到，本文介紹了jquery+Jscex打造游戲力度條，有需要的朋友可以了解一下。2016-10-10
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
這篇文章主要為大家詳細(xì)介紹了jquery Banner輪播選項(xiàng)卡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
一般元素下的多個(gè)指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動(dòng)態(tài)控制,就需要用到j(luò)query的filter()方法2023-08-08
通過jquery實(shí)現(xiàn)頁面的動(dòng)畫效果(實(shí)例代碼)
下面小編就為大家?guī)硪黄ㄟ^jquery實(shí)現(xiàn)頁面的動(dòng)畫效果(實(shí)例代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09