如何在jQuery中使用.not选择器？

Question

I have two divs task1 and task2 . In these tasks, there are panels with names. In task2 , I have a duplicate (Greg). This duplicate have also a duplicate class. How can I search for a name and skip the duplicates? I tried to use the :not() selector but this didn't work.

My example:

 <div class="container">
  <div id="department-task1">
    <div class="panel">
      <p class="panel-name">Jeff</p>
    </div>
    <div class="panel">
       <p class="panel-name">Greg</p>
    </div>
    <div class="panel">
       <p class="panel-name">Peter</p>
    </div>
  </div>

  <br>

  <div id="department-task2">
    <div class="panel">
       <p class="panel-name">Mary</p>
    </div>
    <div class="panel">
       <p class="panel-name">John</p>
    </div>
    <div class="panel duplicate">
       <p class="panel-name">Greg</p>
    </div>
  </div>
</div>

My jQuery code:

$(document).ready(function() {

    function isNamePresent($name) {

        $leader = $(".container :not(.duplicate) .name:contains(" + $name + ")"); 

        return $leader.css("color", "blue");

    }

    isNamePresent("Greg");

});

Answer 1

Use this: $leader = $(".container .panel:not(.duplicate) .panel-name:contains(" + $name + ")");

First off you have no class name , you have panel-name

Second, use .panel:not(.duplicate) to make sure it looks for an element with the class panel that don't have another class duplicate

Working demo

 $(document).ready(function() { function isNamePresent($name) { $leader = $(".container .panel:not(.duplicate) .panel-name:contains(" + $name + ")"); return $leader.css("color", "blue"); } isNamePresent("Greg"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="department-task1"> <div class="panel"> <p class="panel-name">Jeff</p> </div> <div class="panel"> <p class="panel-name">Greg</p> </div> <div class="panel"> <p class="panel-name">Peter</p> </div> </div> <br> <div id="department-task2"> <div class="panel"> <p class="panel-name">Mary</p> </div> <div class="panel"> <p class="panel-name">John</p> </div> <div class="panel duplicate"> <p class="panel-name">Greg</p> </div> </div> </div>