CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
relo80
relo80

Reputation: 285

JQuery: How to select a class without elements of a parent with id?

I have a ul element:

<ul id="listA">
  <li class="myclass">1</li>
  <li class="myclass">2</li>
  <li class="myclass">3</li>
  <li class="myclass">4</li>
  <li class="myclass">5</li>
  <li>
    <ul id="listB">
      <li class="myclass">B1</li>
      <li class="myclass">B2</li>
      <li class="myclass">B3</li>
      <li class="myclass">B4</li>
    </ul>
  </li>
</ul>

I want to get all elements by class name myclass which are not in ul with ID listB.

My tries with $('.myclass:not ul #listB') wont work.

Upvotes: 1

Views: 93

Answers (3)

Majed Badawi
Majed Badawi

Reputation: 28434

You can use not as follows:

const res = $('*:not(ul#listB) > .myclass');

console.log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="listA">
  <li class="myclass">1</li>
  <li class="myclass">2</li>
  <li class="myclass">3</li>
  <li class="myclass">4</li>
  <li class="myclass">5</li>
  <li>
    <ul id="listB">
      <li class="myclass">B1</li>
      <li class="myclass">B2</li>
      <li class="myclass">B3</li>
      <li class="myclass">B4</li>
    </ul>
  </li>
</ul>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171700

Use $('.myclass').not('#listB .myclass')

$('.myclass').not('#listB .myclass').css('color', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="listA">
  <li class="myclass">1</li>
  <li class="myclass">2</li>
  <li class="myclass">3</li>
  <li class="myclass">4</li>
  <li class="myclass">5</li>
  <li>
    <ul id="listB">
      <li class="myclass">B1</li>
      <li class="myclass">B2</li>
      <li class="myclass">B3</li>
      <li class="myclass">B4</li>
    </ul>
  </li>
</ul>

Upvotes: 1

Arthur Hakobyan
Arthur Hakobyan

Reputation: 11

You can give more than 1 class names. So give listA class to li which are in listA

<ul id="listA">
    <li class="myclass inListA">1</li>
    <li class="myclass inListA">2</li>
    <li class="myclass inListA">3</li>
    <li class="myclass inListA">4</li>
    <li class="myclass inListA">5</li>
    <li>
    <ul id="listB">
    <li class="myclass">B1</li>
    <li class="myclass">B2</li>
    <li class="myclass">B3</li>
    <li class="myclass">B4</li>
    </ul>
    </li>
    </ul>

And now use it like that $('.inListA'). It will help I think!

Upvotes: 0

Related Questions