javascript - 使用 jquery 显示和隐藏特定列表元素

Question

我有下面的代码，我需要隐藏最后一个列表项

<div id="addUpdateFruit" style="display: none;">
        <ul class="list Box Design" id="listBox">
                <li>
                    <ul>
                        <li class="label" id="TypeLabel">Type:</li>
                        <li><select name="newTypeId" id="newTypeId">
                                <option selected="selected" value="">Please Select</option>
                        </select></li>
                    </ul>
                </li>
                <li>   // Now want to hide only this
                    <ul>
                        <li class="label" id="FruitLabel">Fruit:</li>
                        <li><select name="newFruitId" id="newFruitId" class="required">
                                <option selected="selected" value="">Please Select</option>
                        </select></li>
                    </ul>
                </li>
                <li>                                                               // Want to hide this
                    <ul>
                        <li class="label">Juice Type:</li>
                        <li><select name="Juice"  class="required" >   
                            <option value="1">MIlk Shake</option>
                            <option value="2">Normal</option>
                        </select></li>
                    </ul>
                </li>

        </ul>
</div>  

为此，我使用了以下代码

$('ul li:gt(2)').show();

还有这个

    var list = document.getElementById("listBox");    
    if (list.style.display == "none"){
        list.style.display = "block";
    }

似乎没有任何效果

如何隐藏或显示 Juice Type 列表项。请帮我解决这个问题

我想要这样:不显示第二个列表项

类型:|______下拉___________|
果汁类型:|______drop down___________|

Answer 1

要实现这一点，您可以修改 jQuery 选择器以使用 :last:

$('ul.listBox > li:last').hide();

或者最好只使用 CSS:

ul.listBox > li:last-child { display: none; }

ul.listBox > li:last-child { display: none; }

<div id="addUpdateFruit">
  <ul class="listBox" id="listBox">
    <li>
      <ul>
        <li class="label" id="TypeLabel">Type:</li>
        <li>
          <select name="newTypeId" id="newTypeId">
            <option selected="selected" value="">Please Select</option>
          </select>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li class="label" id="FruitLabel">Fruit:</li>
        <li>
          <select name="newFruitId" id="newFruitId" class="required">
            <option selected="selected" value="">Please Select</option>
          </select>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li class="label">Juice Type:</li>
        <li>
          <select name="Juice" class="required">   
            <option value="1">MIlk Shake</option>
            <option value="2">Normal</option>
          </select>
        </li>
      </ul>
    </li>
  </ul>
</div>