Выберите все элементы DOM, не принадлежащие конкретному родителю, с помощью jquery.

Question

вот простой пример моей html-структуры

<div>
    <p class="doNotWant">
        HTML stucture is not set in stone
        <a class="linkToSelect">do not want</a> 
    </p>
</div>
<p>
   html structure and tags may vary, very simplified example
   <a class="linkToSelect">want this one</a> 
</p>

, тогда я пытаюсь выбрать только ссылку не под родителем "doNotWant"класс в моем JavaScript ...

$(document).on('click', '.linkToSelect', function (e) { 
    // this code selects both links
    console.log('my logic'); 
}

Я пытался использовать : not () , но пока не увенчался успехом.

Answer 1

Используя :not(), измените ваш селектор на:

$(document).on('click', 'p:not(".doNotWant") .linkToSelect', function(e) {

$(document).on('click', 'p:not(".doNotWant") .linkToSelect', function(e) {
  // this code selects both links
  console.log('my logic');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="doNotWant">
    HTML stucture is not set in stone
    <a class="linkToSelect">do not want</a>
  </p>
</div>
<p>
  html structure and tags may vary, very simplified example
  <a class="linkToSelect">want this one</a>
</p>

Answer 2

В Jquery вы можете использовать селектор :not().

Вы можете сделать следующее, если вы не знаете родительский элемент, но знаете, что его родителем является div.

* 1006. *

Вот скрипка