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

Question

我有两个div task1和task2。在这些任务中，有名称的面板。 在task2中，我有一个副本（Greg）。这个副本也有一个重复的类。 如何搜索名称并跳过重复项？我尝试使用:not()选择器，但这没有用。

我的例子：

 <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>

我的jQuery代码：

$(document).ready(function() {

    function isNamePresent($name) {

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

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

    }

    isNamePresent("Greg");

});

Answer 1

使用此：$leader = $(".container .panel:not(.duplicate) .panel-name:contains(" + $name + ")");

首先，您没有课程name，您有panel-name

其次，使用.panel:not(.duplicate)确保它查找的课程panel中没有其他课程的duplicate

工作演示

$(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>