ホームページ > 記事 > ウェブフロントエンド > jQueryのparent()とsisters()に関する素朴な疑問を詳しく解説
jQueryのparent()とsisters()に関する素朴な疑問を詳しく解説
- 巴扎黑オリジナル
- 2017-06-22 14:05:051891ブラウズ
この記事は、parent() と兄弟() の問題の原因と解決策を例を通して紹介します。とても良いので、興味のある友達は一緒に見てください。
今日、小さな問題を発見しました。どちらが問題を引き起こしているのかは今のところわかりませんが、parent() と兄弟() のどちらかであるようです。
以下のような入力条件に基づいてコンテンツを削除したい:
デモ:
<!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>
<p class="weui_cells weui_cells_access search_show" id="search_show" style="diplay:none;">
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch">CODING</a>
</p>
</p>
<p class="weui_cell bolSearch">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >WW11JS0261</a>
</p>
</p>
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >OTHER</a>
</p>
</p>
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >LITER</a>
</p>
</p>
<p class="weui_cell ">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >POST</a>
</p>
</p>
<p class="weui_cell">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch" >WW11JM042222</a>
</p>
</p>
<p class="weui_cell">
<p class="weui_cell_bd weui_cell_primary">
<a class="qy_color bolSearch">WW11JM031855</a>
</p>
</p>
</p>
</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 に変更します。これは、この条件が固有であり、繰り返されないことを意味します。 $(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide(); を
$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show(); に変更して、表示したい内容をすべて実現しました。内容は満足ですが、表示が私の要求を満たしていません。 以上がjQueryのparent()とsisters()に関する素朴な疑問を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。