如果 DIV 有超过 4 个元素,则将 Class 添加到 <body>
Add Class to <body> if a DIV has more then 4 elements
当 <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 任何人都知道如何做到这一点。提前致谢。
你可以使用 setInterval(只有当你的 li 是动态添加删除时才需要,如果不是这样你可以跳过它),并检查它的长度并根据需要执行相应的操作。
setInterval(function(){
if(jQuery('div.scroll ul > li').length > 4)
jQuery('body').addClass('popup');
else
jQuery('body').removeClass('popup');
}, 1000);
注意:您需要将此脚本放在 body 标签之前或需要比较长度的元素之后。
我认为您正在寻找类似以下内容。
$(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");
}
}
这应该适合你
<script type="text/javascript">
$(document).ready(function(){
if ($('.scroll li').length > 4) {
$("body").addClass("popup");
} else {
$("body").removeClass("popup");
}
});
</script>
当 <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 任何人都知道如何做到这一点。提前致谢。
你可以使用 setInterval(只有当你的 li 是动态添加删除时才需要,如果不是这样你可以跳过它),并检查它的长度并根据需要执行相应的操作。
setInterval(function(){
if(jQuery('div.scroll ul > li').length > 4)
jQuery('body').addClass('popup');
else
jQuery('body').removeClass('popup');
}, 1000);
注意:您需要将此脚本放在 body 标签之前或需要比较长度的元素之后。
我认为您正在寻找类似以下内容。
$(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");
}
}
这应该适合你
<script type="text/javascript">
$(document).ready(function(){
if ($('.scroll li').length > 4) {
$("body").addClass("popup");
} else {
$("body").removeClass("popup");
}
});
</script>