Home > javascript > 特定のテキストがあった場合、親要素から非表示にするjQuery

特定のテキストがあった場合、親要素から非表示にするjQuery

  • Posted by: master
  • javascript

例えばクラスやIDでユニークな値が取れずにテキストからでのみしか取れない場合

下記のようなHTMLコード例があった場合です。

<div id="test">
  <ul>
    <li>バナナ</li>
    <li>リンゴ</li>
  </ul>
  <ul>
    <li>トマト</li>
    <li>オレンジ</li>
  </ul>
</div>

「トマト」を含んだ場合 ul要素を非表示にしたい

下記のようなjQueryのコードで親要素を引っ張って非表示にします。(jQueryをあらかじめ読んでおいて下さい、その他若干省略してます)

$("#test ul li").each(function(){
  if ($(this).html().match(/トマト/g)) {
    $(this).parent("ul").hide();
  }
});

上記コードでトマトを含んでいる場合ul要素が非表示となります。

動作デモ

HTMLコードにあまりクラスやIDを付与したくない場合や、ユニークな値をHTMLタグに付与出来ない場合はテキストから判別するかたちでの対応です。

なお、ul要素の2番目みたいなかたちでも対応は出来ますが今回はあらかじめ出現がランダムで常に一定ではないという想定での例となります。あらかじめ絞り込める条件や出現条件が決まっている場合はそちらで絞った方が早いですし癖が少ないですね。

Comments:0

コメントする

Home > javascript > 特定のテキストがあった場合、親要素から非表示にするjQuery

Search

Feeds

Return to page top