Question

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

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>项，则将类添加到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

3 个答案: