首页 > 解决方案 > jquery closest doesn't work

问题描述

Here, why jquery closest isn't working ? I've tried using find, next but doesn't work. I want to add html only in closest class of li which contains children ul.

$(document).ready(function(){
  if ($('li').children("ul").length) {
    $(this).closest(".submenu").html('+');
  }
})
*{
margin:0px;
padding:0px;
}
ul li{
  list-style:none;
  float:left;
  margin-right:10px;
}

ul li ul li{
 float:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <ul>
    <li>General<span class="submenu"></span></li>
    <li>Extra<span class="submenu"></span></li>
    <li>Sport<span class="submenu"></span>
      <ul>
        <li>
          Volleyball
        </li>
        <li>
          Football
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>

标签: jquery

解决方案


You need to find the length of ul which is inside the li.

$('.submenu').parent().each(function(){
    if ($(this).children("ul").length) {
      $(this).find('.submenu').html('+');
    }
})
*{
margin:0px;
padding:0px;
}
ul li{
  list-style:none;
  float:left;
  margin-right:10px;
}

ul li ul li{
 float:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <ul>
  <li>General<span class="submenu"></span></li>
  <li>Extra<span class="submenu"></span></li>
  <li>Sport<span class="submenu"></span>
    <ul>
      <li>
        Volleyball
      </li>
      <li>
        Football
      </li>
    </ul>
  </li>
  </ul>
</body>
</html>


推荐阅读