Question

我有下一个结构：ul＆gt; li> ul＆gt; （x个li）。我的问题是，如何只选择元素：ul＆gt; li> ul＆gt; （3或更少）。那是因为我只需要在这些元素中做一些动作。我有，但是......你知道，我是Jquery的新手：'（

$(document).ready(function(){ 

var hideElement = $(".show-more-option")
    if($('.content').length<=3){               
        $hideElement.switchClass(".show-more", "hide-more");        
    } 
});

Answer 1

你可以这样做。

名为countListItems的函数将ul作为函数参数，并计算它包含的li子元素的数量，并查看该数字是否小于或等于3.如果是，则向ul添加一个类，＆＃39; threeOrLess＆＃39 ;.

该课程所做的就是为符合条件的ul添加绿色背景颜色。这允许您区分给定ul中的li的数量。一旦您根据自己的标准正确识别了所需的ul，您就可以专门定位那些样式，或者让它们按照您的意愿行事。

请注意，示例标记中有2个ul，我们正在针对它们运行函数countListItems。第一个ul，有一个＆＃39; foo＆＃39;，有3个孩子，所以我们有一个匹配，并希望定位这个ul。然而，第二个（带有一个＆＃39; bar＆＃39;的ul）包含超过3个li的孩子，所以我们不对那个ul做任何事情。

https://jsbin.com/neradafice/edit?html,js,output

<!DOCTYPE html>
<html>
    <head>
        <style>
           ul.threeOrLess {
               background-color: green;
           }
        </style>
    </head>
    <body>
        <ul>
            <li>
                1
                <ul class="foo">
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ul>
            </li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul>
            <li>
                1
                <ul class="bar">
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script type="text/javascript">
            $(function(){
                countListItems($('.foo'));
                countListItems($('.bar'));
            });

            function countListItems(ul) {
                if ( ul.children('li').length <= 3 ) {
                    ul.addClass('threeOrLess')
                }
            }
        </script>
    </body>
</html>

Answer 2

您可以使用jQuery的.filter()：

轻松完成此操作

$(function() {
  let threeOrFewer = $("ul").filter(function() {
    return $(this).find("li").length <= 3;
  });
  threeOrFewer.addClass("switchClass");
});

.switchClass {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

选择带有x个子项的ul

2 个答案: