gt()和:not(:last)来控制<li>元素显示的内容

最新推荐文章于 2022-10-17 22:42:32 发布

孤独的钥匙没有锁

最新推荐文章于 2022-10-17 22:42:32 发布

阅读量1.8k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/gududeyaoshi/article/details/50457134

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function(){
	//选择大于4并且不包括最后一个
        var $hideLis = $("li:gt(4):not(:last)");
		//选择大于4并且不包含第一个
		$("li:gt(4):not(:first")
		//选择小于4并且不包含第一个
		$("li:lt(4):not(:first)")

        $hideLis.hide();

 

        $("a").click(function(){

            if($hideLis.is(":hidden")){

                $(this).html("简化");

                $hideLis.show();

            }else{

                $(this).html("更多");

                $hideLis.hide();

            }

            return false;

        })

    });

</script>

</head>

     

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <a href="#">更多</a>

    </ul>

</body>

</html>

孤独的钥匙没有锁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
gt()和:not(:last)来控制<li>元素显示的内容

test $(function(){ //选择大于4并且不包括最后一个 var $hideLis = $("li:gt(4):not(:last)"); //选择大于4并且不包含第一个 $("li:gt(4):not(:first) ") //选择小于4并且不包含第一个 $("li:lt(4):not(:first)"
复制链接

扫一扫