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

I have below code, i need to hide last list item

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

<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>

To do this, i used below codes

为此,我使用下面的代码

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

and this

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

Nothing seem working

似乎没什么用

How to hide or show Juice Type list item.Please help me on this

如何隐藏或显示果汁类型列表项。请帮助我

I want like this: where second list item is not shown

我想这样:第二个列表项没有显示

Type: |______drop down___________|
Juice Type: |______drop down___________|

输入:| ______下拉___________ |果汁类型:| ______下拉___________ |

2 个解决方案

#1

To achieve this you can amend your jQuery selector to use :last:

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

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

Or preferably you could just use CSS:

或者最好你可以使用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>

#2

This should work

这应该工作

$('ul li:nth-of-type(2)').hide();

$('ul li:last-of-type').hide();

#1