如果 DIV 有超过 4 个元素，则将 Class 添加到 <body>

Question

当 <div class="scroll"> 有超过 4 个 <li>text</li> 元素时，我正在尝试将 class 添加到 <body>。

HTML:

 <body>  
   <div class="scroll">
   <div>   <!-- Parent Element -->
     <ul>    <!-- Parent Element 2 -->
     <li>text</li>     <!-- Child 1-->
     <li>text</li>     <!-- Child 2-->
     <li>text</li>     <!-- Child 3-->
     <li>text</li>     <!-- Child 4-->
     <li>text</li>     <!-- Child 5-->
     </ul>
   </div>
   </div>
 <body>

意味着如果 <div class="scroll"> 有 5 个 <li>text</li> 项目然后将 class 添加到 body 就像 <body class"popup">。 Jquery 任何人都知道如何做到这一点。提前致谢。

Answer 1

你可以使用 setInterval（只有当你的 li 是动态添加删除时才需要，如果不是这样你可以跳过它），并检查它的长度并根据需要执行相应的操作。

setInterval(function(){
    if(jQuery('div.scroll ul > li').length > 4)
        jQuery('body').addClass('popup');
    else
        jQuery('body').removeClass('popup');
}, 1000);

注意：您需要将此脚本放在 body 标签之前或需要比较长度的元素之后。

Answer 2

我认为您正在寻找类似以下内容。

$(function() {
    //Will execute as soon as the DOM is loaded
    addBodyClass();

    //Let's say a click function somewhere deletes a LI
    $("selector").on("click", function() {
        $('.scroll li:last').remove();
        //Now there are 4 LIs which means remove the popup class from body
        //So, call the function again
        addBodyClass();
    });

});

function addBodyClass() {

    $('.scroll li').length > 4 && $("body").addClass("popup") || $("body").removeClass("popup");

    //The above is the shorter version of
    if ($('.scroll li').length > 4) {
        $("body").addClass("popup");
    } else {
        $("body").removeClass("popup");
    }
}

Answer 3

这应该适合你

<script type="text/javascript">

   $(document).ready(function(){

   if ($('.scroll li').length > 4) {
     $("body").addClass("popup");
    } else {
     $("body").removeClass("popup");
   }

 });


</script>

如果 DIV 有超过 4 个元素，则将 Class 添加到 <body>

Add Class to <body> if a DIV has more then 4 elements

javascript

jquery

html

count

addclass