locked
How to show and hide last li in a div RRS feed

  • Question

  • User264732274 posted

    content div has ul and li. i just want hide and show last li by jquery. what would be the code

    <div id="content">
        <ul class="paginate pag5 clearfix">
            <li class="single">Page 5 of 5 of 50</li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">6</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">7</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">8</a></li>
            <li class="current">9</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="single"><div id="loader">Loading....</div></li>
        </ul>
    </div>

    Sunday, December 27, 2015 7:27 PM

Answers

  • User475983607 posted

    Use the last-child JQuery selector.

    https://api.jquery.com/last-child-selector/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 27, 2015 8:52 PM
  • User264732274 posted

    <div id="content">
        <ul class="paginate pag5 clearfix">
            <li class="single">Page 5 of 5 of 50</li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">6</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">7</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">8</a></li>
            <li class="current">9</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="single"><div id="loader">Loading....</div></li>
        </ul>
    </div>
    <input id = "btnSubmit" type="submit" value="Show/Hide"/>

    $(document).ready(function() {
        $("#btnSubmit").click(function(){
            $('.paginate li:last-child').toggle('show');
        });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 28, 2015 2:23 PM

All replies

  • User475983607 posted

    Use the last-child JQuery selector.

    https://api.jquery.com/last-child-selector/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 27, 2015 8:52 PM
  • User264732274 posted

    <div id="content">
        <ul class="paginate pag5 clearfix">
            <li class="single">Page 5 of 5 of 50</li>
            <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">6</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">7</a></li>
            <li><a href="http://localhost:13562/SamplePager/Index">8</a></li>
            <li class="current">9</li>
            <li class="navpage"><a href="">next</a></li>
            <li class="single"><div id="loader">Loading....</div></li>
        </ul>
    </div>
    <input id = "btnSubmit" type="submit" value="Show/Hide"/>

    $(document).ready(function() {
        $("#btnSubmit").click(function(){
            $('.paginate li:last-child').toggle('show');
        });
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 28, 2015 2:23 PM