jquery：与えるエラーがあります：jquery-1.12.3.js：1502キャッチエラー：構文エラー、認識できない式：contains（ "sys"）

Question

"pre" html要素をテキストでフィルタリングするフィルターを実装しようとしていますユーザーが入力html要素に入力しているものと一致します。

しかし、私は何を入力しているのかチェックしようとするとうまくいかないようですが、検索するテキストをハードコードすると機能します。私はそれが動作する「前」の要素でいくつかの文字列に「フィルタ」をハードコーディングした場合

$(document).ready(function(){ 
     $("#input") 
     .change(function() { 
      var filter = $(this).val(); 
      if(filter) { 
      $("#list").find("pre:contains(\""+filter+"\")").show() 
      $("#list").find("pre:not(contains(\""+filter+"\"))").hide() 

      } else { 

      } 
      return false; 
      }) 
     .keyup(function() { 

      $(this).change(); 
      }); }); 

：

は、ここに私のjsスクリプトです。 例えば：文字列の1つに "sys"という文字が含まれているので、ハードコードの場合は $("#list").find("pre:contains("sys")").hide()：要素を隠します。

Answer 1

隠蔽する第二のライン、

$("#list").find("pre:not(contains("+filter+"))").hide() 

が(contains(..))

---

ために認識されていない式exprをスロー

$("#list").find("pre:not(contains(sys)").hide() 

に変換され、これはため:であるべきです〜:not(:contains(...))

$("#list").find("pre:not(:contains("+filter+"))").hide() 
//      ^

Fiddle Demo

Answer 2

引用符をチェックし、あなたが引用符をエスケープする必要はありません。

$("#input").change(function() { 
 
    var filter = this.value; 
 
    $("#list").find("pre:contains(" + filter + ")").show() // show the filtered one 
 
      .siblings('pre').hide(); // hide others. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='input'> 
 
    <option>Filter it...</option> 
 
    <option>where</option> 
 
    <option>sys</option> 
 
</select> 
 
<div id='list'> 
 
    <pre>what</pre><br> 
 
    <pre>when</pre><br> 
 
    <pre>sys</pre><br> 
 
    <pre>where</pre><br> 
 
</div>

---

問題が疑似セレクタ:contains()使い方です。 2番目の行の直前に:がありません。他の要素を非表示にしたい場合は、を入力してください。.siblings('pre')の連鎖を使用し、.hide()で非表示にしてください。上記の答えを確認してください。最終的な評価 -