If parent div has more than 1 child div, so add-class to body
Question
I added on my site a div, which sometimes displays 1 child div and sometimes more than 1 and I want add a class to Body tag if the childs div are 1 if not give to body another class.
I tried this code, but it did not work :
JavaScript
setInterval(function(){
if(jQuery('div#program-days .row').length > 1)
jQuery('body').addClass('bodyclass1');
else
jQuery('body').removeClass('bodyclass2');
}, 1000);
HTML
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
3 answers
solution1
1 ACCPTED 2019-04-27 09:52:56
You should removeClass and addClass like this
setInterval(function(){
if(jQuery('div#program-days .row').length > 1){
jQuery('body').addClass('bodyclass1');
jQuery('body').removeClass('bodyclass2');
}
else{
jQuery('body').removeClass('bodyclass1');
jQuery('body').addClass('bodyclass2');
}
}, 1000);
setInterval(function(){ if(jQuery('div#program-days .row').length > 1){ jQuery('body').addClass('bodyclass1'); jQuery('body').removeClass('bodyclass2'); } else{ jQuery('body').removeClass('bodyclass1'); jQuery('body').addClass('bodyclass2'); } }, 1000);
.bodyclass1{ background-color:red; } .bodyclass2{ background-color:blue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="program-days"> <div class="row">program 1</div> <div class="row">program 2</div> <div class="row">program 3</div> </div>
solution2
1 2019-04-27 09:58:35
You can try this code, up on click on try now the class will be added to the body if childs are more than one
<!DOCTYPE html> <html> <body> <!-- This is a comment node! --> <button onclick="myFunction()">Try it</button> <div id="program-days"> <div class="row">program 1</div> <div class="row">program 2</div> <div class="row">program 3</div> </div> <script> function myFunction() { var parent = document.getElementById("program-days"); if (parent.childNodes.length > 1) { document.body.classList.add('myclass'); } } </script> </body> </html>
solution3
1 2019-04-27 09:58:44
You dont remove the other class when you add the class:
Here is an example using non-jQuery:
Javascript:
setInterval(function(){
var els = document.querySelectorAll("#program-days .row");
var body = document.querySelector("body");
if (els.length > 1) {
body.classList.add("red-border");
body.classList.remove("blue-border");
} else {
body.classList.add("blue-border");
body.classList.remove("red-border");
}
}, 1000);
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
</body>
</html>
CSS:
.red-border {
border: 1px solid red;
}
.blue-border {
border: 1px solid blue;
}
Working plunker: http://plnkr.co/edit/ATP63ZWXASTwFaG2jM3y?p=preview
It can be done with jQuery aswell, using your syntax.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.