Question

我需要使用jQuery检查每个li元素是否具有任何值。我在下面提供我的代码。

$("#navbarNavDropdown ul a").each(function() {
  if ($(this).find('li').has("ul").length) {
    alert('Yeah, we have a ul ' + $(this).text());
  } else {
    alert('Yeah, we dont have a ul ' + $(this).text());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul>
    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
          <ul class="dropdown-menu s-drop">
            <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown mega-drop pstatic">
      <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    </li>
  </ul>
</div>

我的要求是：假设循环内的第一个li元素有一些子元素（ul）的值，我想在此处打印文本，而第二个li元素没有子元素（ul）因此它将归入其他部分。如果还检查submenu(i.e-Level 2)是否具有任何ul值。我的代码无法正常工作。

Answer 1

此代码可以正常工作。

$("#navbarNavDropdown ul a").each(function() {
  if ($(this).closest('li').has("ul").length) {
    alert('Yeah, we have a ul ' + $(this).text());
  } else {
    alert('Yeah, we dont have a ul ' + $(this).text());
    $(this).find('span').remove(); //to remove the span
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul>
    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
          <ul class="dropdown-menu s-drop">
            <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown mega-drop pstatic">
      <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    </li>
  </ul>
</div>

但是根据我的个人情况，有一段更好的代码可以满足您的需求

$("#navbarNavDropdown > ul > li").each(function() {
  if ($(this).has("ul").length) {
    alert('Yeah, we have a ul ' + $(this).text());
  } else {
    alert('Yeah, we dont have a ul ' + $(this).text());
    $(this).find('span').remove(); //to remove the span
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul>
    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
          <ul class="dropdown-menu s-drop">
            <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown mega-drop pstatic">
      <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    </li>
  </ul>
</div>

我将#navbarNavDropdown ul a更改为#navbarNavDropdown>ul>li，所以它只会循环2次 [节省时间，并且只循环第一级元素，删除了span] < / em>，并根据您的评论，我认为这是您想要的代码。

我希望这可以解决您的错误。

Answer 2

这将解决您的问题。

$("#navbarNavDropdown ul li").each(function() {
  if ($(this).find("ul").length) {
    alert('Yeah, we have a ul ' + $(this).text());
  } else {
    alert('No, we dont have a ul ' + $(this).text());
    $(this).find('span').remove();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul>
    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
          <ul class="dropdown-menu s-drop">
            <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown mega-drop pstatic">
      <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    </li>
  </ul>
</div>

Answer 3

<a>元素没有任何子<ul>或<li>元素。 <ul>是一个兄弟姐妹，不是孩子。

如果您打算成小孩子，则需要更改html，以使结束</a>在结束</ul>之后。请注意，尽管由于您拥有子<a>元素，您将无法将整个内容包装在锚点中，因为这是无效的html，浏览器也不会创建这样的结构。

您需要将行更改为可以检查兄弟姐妹的内容，例如：

$(this).next('ul').find('li ul').length
//Or go back up to the parent element and then go searching back down
$(this).parent().find('li ul').length

Answer 4

ul不在元素内，因此$(this).find('li').has("ul")无法正常工作。

使用$(this).next()获取ul元素。

Answer 5

替代方法。

$("#navbarNavDropdown ul").each(function() {
  $.each(this.children, function(index, element) {
    const text = element.innerText.split('\n').reverse()[0];
    if (element.localName === 'li' && $(element).has('ul').length > 0) {
      alert('Yeah, we have a ul ' + text);
    } else {
      alert('Yeah, we dont have a ul ' + text);
      $(element).find('span').remove();
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul>
    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
          <ul class="dropdown-menu s-drop">
            <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown mega-drop pstatic">
      <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
    </li>
  </ul>
</div>

使用jQuery检查li元素是否具有带值的子代

5 个答案: