Question

下面我有一个包含多个ul元素的li列表，其中包含动态数据，它看起来像这样：

<ul>
 <li>
  <h id='name'>some name</h>
  <h id='number'> 5 </h>
 </li>
 <li>
  <h id='name'>some name</h>
  <h id='number'> 1 </h>
 </li>
</ul>

我希望在数字大于或等于2时隐藏整个li块。下面的代码仅隐藏实际的数字标题而不是整个li块。我尝试在.parent()之前添加.hide()并且没有做任何事情。任何帮助，将不胜感激！

$("li #number").filter(getNum).hide();

 function getNum(){
    var num = (parseInt($(this).text())); 
      if (num >= 2) {
        return num //returns numbers I want to hide
      }
 }

Answer 1

使用class代替重复id，并使用parent隐藏整个li。

$("li .number").filter(getNum).parent('li').hide();

 function getNum(){
    var num = (parseInt($(this).text())); 
      if (num >= 2) {
        return num //returns numbers I want to hide
      }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <h class='name'>some name</h>
    <h class='number'> 5 </h>
  </li>
  <li>
    <h class='name'>some name</h>
    <h class='number'> 1 </h>
  </li>

Answer 2

试试这个。使用parent()隐藏li并使用类，因为id是唯一元素。

$("li .number").filter(getNum).parent().hide();

 function getNum(){
    var num = (parseInt($(this).text())); 
      if (num >= 2) {
        return num //returns numbers I want to hide
      }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
  <h class='name'>some name</h>
  <h class='number'> 5 </h>
 <li>
  <h class='name'>some name</h>
  <h class='number'> 1 </h>
</ul>

JQuery - 如何隐藏过滤结果

2 个答案: