jQuery check if no sibling has class

Question

$(".next-list li").click(function() {
  if ($(this).hasClass("all-selected")) {
    if (!$(this).hasClass("filter-selected")) {
      $(this).siblings().removeClass("filter-selected");
      $(this).siblings().children(":last-child").css({
        "display": "none"
      });
      $(this).addClass("filter-selected");
      $(this).children().last().css({
        "display": "inline-block"
      });
    } else {
      $(this).siblings().addClass("filter-selected");
      $(this).siblings().children(":last-child").css({
        "display": "inline-block"
      });
      $(this).removeClass("filter-selected");
      $(this).children().last().css({
        "display": "none"
      });
    }
  } else {
    if (!$(this).hasClass("filter-selected")) {
      $(this).addClass("filter-selected");
      $(this).children().last().css({
        "display": "inline-block"
      });
      $(".all-selected").removeClass("filter-selected");
      $(".all-selected > span:last-child").css({
        "display": "none"
      });
    } else {
      $(this).removeClass("filter-selected");
      $(this).children().last().css({
        "display": "none"
      });
      console.log($(this).siblings("filter-selected").length);
      if ($(this).siblings("filter-selected").length == 0) {
        $(this).parent().children("li:first-child").addClass("filter-selected");
        $(this).parent().children("li:first-child").children().last().css({
          "display": "inline-block"
        });
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-filter">
  <div class="dropdown-filter-selected"><a href="#"><span class="changeable"><span class="category-text">Provider Kartu</span></span><span class="dropdown-filter-icon flaticon-arrow-down-sign-to-navigate"></span></a>
  </div>
  <div class="dropdown-filter-selection">
    <ul class="dropdown-filter-selection-list next-list">
      <li class="filter-selected all-selected"><span class="changeable"><span class="menu-standard category-text">Semua Provider</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check first-list-icon"></span>
        </a>
      </li>
      <li><span class="changeable"><span class="menu-standard category-text">Mastercard</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span>
        </a>
      </li>
      <li><span class="changeable"><span class="menu-standard category-text">VISA</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span>
      </li>
      <li><span class="changeable"><span class="menu-standard category-text">JCB</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span>
      </li>
      <li><span class="changeable"><span class="menu-standard category-text">Union Pay</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span>
      </li>
      <li><span class="changeable"><span class="menu-standard category-text">Lainnya</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span>
      </li>
    </ul>
  </div>
</div>

my html is like this

<ul class="dropdown-filter-selection-list next-list">
    <li class="all-selected"><span class="changeable"><span class="menu-standard category-text">Semua Provider</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check first-list-icon" style="display: none;"></span></li>
    <li><span class="changeable"><span class="menu-standard category-text">Mastercard</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span></li>
    <li><span class="changeable"><span class="menu-standard category-text">VISA</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span></li>
    <li><span class="changeable"><span class="menu-standard category-text">JCB</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check"></span></li>
    <li class="filter-selected"><span class="changeable"><span class="menu-standard category-text">Union Pay</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check" style="display: inline-block;"></span></li>
    <li class="filter-selected"><span class="changeable"><span class="menu-standard category-text">Lainnya</span></span><span class="dropdown-filter-icon checked-menu-icon flaticon-check" style="display: inline-block;"></span></li>
</ul>

I am checking if my element (li) siblings has NO class filter-selected, but I always get true even if there are the classes. Here is my jquery

if($(this).siblings("filter-selected").length == 0) {
    $(this).parent().children("li:first-child").addClass("filter-selected");
    $(this).parent().children("li:first-child").children().last().css({"display": "inline-block"});
}

The this is any of the li that has no filter-selected.

Any idea? Any help appreciated, thanks :)

Answer 1

Since the filter-selected is class, you should add a dot before.

if($(this).siblings(".filter-selected").length == 0) {