代码之家  ›  专栏  ›  技术社区  ›  Dolorosa

jQuery检查是否没有同级具有类

  •  3
  • Dolorosa  · 技术社区  · 8 年前
    $(".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)兄弟是否没有类 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 有没有一个李没有 筛选 .

    知道吗?感谢任何帮助,谢谢:)

    1 回复  |  直到 8 年前
        1
  •  4
  •   gaetanoM    8 年前

    自从 filter-selected 是类,您应该在之前添加一个点。

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