How can I loop through divs and add a class if all children are set to display:none?-CodePudding

I am trying to hide a paragraph tag if all the children of its sibling are set to display none.

Here is an example of some of my code (the rest is just more of the same divs):

var templateheading = $('.js-template-heading');
var templategrid = templateheading.next();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="c-templates-wrapper">
  <p class="js-template-heading">These themes are available on <strong>Starter</strong> website packages.</p>
  <div class="c-templates-grid">
    <div class="js-template">Starter 1</div>
    <div class="js-template">Starter 2</div>
    <div class="js-template">Starter 3</div>
  </div>
</div>

<div class="c-templates-wrapper">
  <p class="js-template-heading">These themes are available on <strong>Pro</strong> website packages.</p>
  <div class="c-templates-grid">
    <div class="js-template">Pro 1</div>
    <div class="js-template">Pro 2</div>
    <div class="js-template">Pro 3</div>
  </div>
</div>

Just to store the paragraphs and the grids in their own variables.

So basically, I need to loop through every templategrid and if ALL of the children within it are set to display none via a style tag (done with a filter), add a class to either c-templates-wrapper or js-template-heading (I basically just want to hide the corresponding paragraph it if theres nothing to show within the grid below it).

I hope that makes sense and I hope someone can help.

CodePudding user response：

You could use something like this:

$('.c-templates-wrapper p.js-template-heading').filter(function() {
  return $(this).next().find(".js-template:visible").length == 0
}).hide()

Demo

Show code snippet

$(".c-templates-wrapper:first .js-template").hide()

$('.c-templates-wrapper p.js-template-heading').filter(function() {
  return $(this).next().find(".js-template:visible").length == 0
}).hide()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-templates-wrapper">
  <p class="js-template-heading">These themes are available on <strong>Starter</strong> website packages.</p>
  <div class="c-templates-grid">
    <div class="js-template">Starter 1</div>
    <div class="js-template">Starter 2</div>
    <div class="js-template">Starter 3</div>
  </div>
</div>

<div class="c-templates-wrapper">
  <p class="js-template-heading">These themes are available on <strong>Pro</strong> website packages.</p>
  <div class="c-templates-grid">
    <div class="js-template">Pro 1</div>
    <div class="js-template">Pro 2</div>
    <div class="js-template">Pro 3</div>
  </div>
</div>

CodePudding user response：

I have coded. But if I hide the paragraph, on display:none of sibling's children then you cannot see anything because everything will get hidden. So, I modified the code. But you can easily set it according to your need.

I just use CSS to display:none to children. And then on display:none, I change the background-color of Paragraph to red.

$(document).ready(function(){
    var paragraph = $(".js-template-heading");
    if(paragraph.siblings().children().css("display")=="none"){
        paragraph.css("background-color","red");
    }
});

.js-template{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="c-templates-wrapper">
        <p class="js-template-heading">These themes are available on <strong>Starter</strong> website packages.</p>
        <div class="c-templates-grid">
            <div class="js-template">Starter 1</div>
            <div class="js-template">Starter 2</div>
            <div class="js-template">Starter 3</div>
        </div>
    </div>

</body>
</html>