jQueryのparent()とsisters()に関する素朴な疑問を詳しく解説-jsチュートリアル-php.cn

jQueryのparent()とsisters()に関する素朴な疑問を詳しく解説

巴扎黑

リリース： 2017-06-22 14:05:05

オリジナル

1964 人が閲覧しました

この記事は、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 に変更します。これは、この条件が固有であり、繰り返されないことを意味します。

大丈夫、選択した条件は再度表示されます。

次に、条件 WW11JM031 を WW11 に戻し、同時に

$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show().parent().parent().siblings().hide();

ログイン後にコピー

を

$(".bolSearch").hide().filter(".bolSearch:contains("+coding+")").show();

ログイン後にコピー

に変更して、表示したい内容をすべて実現しました。内容は満足ですが、表示が私の要求を満たしていません。

最後に寄り道してスタイルを変えてみました。

しかし、私はまだこの冗談を回避できず、なぜ唯一の条件だけをフィルタリングできるのか理解できません。

以上がjQueryのparent()とsisters()に関する素朴な疑問を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。