jQuery检查是否没有 sibling 有类(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>

我的html是这样的

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

我正在检查我的元素 (li) sibling 是否没有类 filter-selected，但即使有类，我总是得到 true。这是我的 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"});
}

this 是任何没有filter-selected 的 li。

有什么想法吗？感谢任何帮助，谢谢:)

Answer 1

因为filter-selected是类，你应该在前面加一个点。

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