jquery - 如何指定使用 Jquery 选择的级别 :Contains

Question

我正在尝试选择包含特定文本的容器，然后相应地隐藏它们。

但是，它似乎也选择了子元素，而不是主元素。

这会导致我的部分容器消失。

$("#SearchText").on("keyup", function () { 
    var text = $("#SearchText").val(); 

    $(".myList :contains(" + text + ")").show();
    $(".myList :not(:contains(" + text + "))").hide();
});

html:

<div class="myList">
  <div class="container"> <!-- Wanting to select here -->
    <div> <!-- currently selecting here -->
      word
    </div>
   <div>  <!-- currently selecting here -->
      say
   </div>

   <div>  <!-- currently selecting here -->
     hello
   </div>
 </div>

附Jfiddle: https://jsfiddle.net/661p4q0j/1/

Answer 1

您需要使您的选择器更加具体。在这种情况下，仅选择包含给定文本的 .container 元素，而不选择 .myList 元素中包含的任何元素:

$(".myList .container:contains(...)")
$(".myList .container:not(...)")

JSFiddle demo .