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";
    }

似乎没有工作

如何隐藏或显示果汁类型列表项。请帮我解决此问题

我想这样：第二个列表项未显示

键入：| ______下拉___________ |
果汁类型：| ______下拉___________ |

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>

Answer 2

这应该有效

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

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

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

2 个答案: