y_r_k y_r_k - 1 month ago 4
jQuery Question

How do I apply style for parent div and their hidden child div also?

The application is more of single page navigation with div manipulation. Based on the Previous/Next button it will display the section accordingly. Now, I have to generate a preview page for the filled form data. My thought was to clone all divs and replace the input fields with read-only. Here is my div structure which was cloned already.

Solution Looking for : Enable each div style display into "inline-block"

enter image description here

Code tried:

function confirmationPage() {
//1
$(".pgePreview").closest('div').children().css('display', 'inline-block');
//2
$("#pgePreview div").each(function (e) {
if (e != 0) {
$(this).css('display', 'inline-block');
}
});
}


Thanks for your help.

Answer

//$(".pgePreview div").css('display','inline-block')  //<-- this will update style of all divs

$(".pgePreview div:hidden").css('display','inline-block') //<-- this will update style of all hidden divs 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pgePreview">
  <div class="box" style="display:none;">Test 1</div>
  <div class="box" style="display:none;">Test 2</div>
  <div class="box">Test 3</div>
  <div class="box">Test 4</div>
  <div class="box">Test 5</div>
</div>

all div to be visible,

$(".pgePreview div").css('display','inline-block')

another is, for all div's not visible

$(".pgePreview div:hidden").css('display','inline-block')