如何使用javascript顯示無序列表中的一半元素？

Question

我在一個網站上工作，我需要在頁面上顯示圖像列表。 但是，該頁面需要顯示列表中的一半圖像，並且當用戶單擊“顯示更多”按鈕時，它應該顯示列表中的其余圖像。 我該如何使用JavaScript？ 按照我正在使用的html。

<div class="pic_holder">
        <ul>

        <li>
            <a href="#"><img src="images/6001.jpg"></a>
            <span class="text-content "><span>
                <div class="head_name">Place Name</div>
                <div class="subhead_name">Place Name</div>
            </span></span>

        </li>
        <li>
            <a href="#"><img src="images/600_O2.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name">Place Name</div>
                <div class="subhead_name">Place Name</div>
            </span></span>


        </li>
        <li>
            <a href="#"><img src="images/600-v4.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>

        <li>
            <a href="#"><img src="images/6001.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>
        <li>
            <a href="#"><img src="images/600_O2.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>

        <li>
            <a href="#"><img src="images/600-v4.jpg"></a>
            <span class="text-content"><span>
                <div class="head_name ">Place Name</div>
                <div class="subhead_name ">Place Name</div>
            </span></span>
        </li>

  <div class="show_more">
        <h2>Show More</h2>

    </div>

Answer 1

解決方案應該是：

var $items = $("ul li");
$items.hide();
$items.slice(0, Math.floor($items.length/2)).show();

在“顯示更多”按鈕中，您只需要顯示所有項目。

var $items = $("ul li");
$items.show();