If div in iframe has child with specific class do

Question

I want to add a class to the parent if the child has a specific class. The problem: It's in an iFrame and I'm not very good with jQuery.
It don't really has to be jQuery, any other way would be also great. Just notice: The iFrame is on my domain, but I can't access it, because it's generated by a plugin.

If you have any ideas how to fix it, I would appreciate it

My HTML looks somewhat like this in devtools:

<iframe src="#" id="iFrameResizer0">
<div class="book-day">
    <button class="disabled">Button Text</button>
</div>
<div class="book-day">
    <button class="active">Button Text</button>
</div>

</iframe>

and my jQuery :

$(document).ready(function () {

$("#iFrameResizer0").contents().find(".book-day button")
    if ($('.book-day button').hasClass('disabled')) {
     $(".book-day button").parent().addClass('disabled');
}

});

if everything works correct I want my html looks like this afterwards:

<iframe src="#" id="iFrameResizer0">
    <div class="book-day disabled">
        <button class="disabled">Button Text</button>
    </div>
    <div class="book-day">
        <button class="active">Button Text</button>
    </div>
    
</iframe>

Devtools:

Answer 1

NOTE : this code has to be executed AFTER the iFrame has loaded and rendered. If you execute this in the head of the parent page without wrapping it in $(function() { ... }), it will not work

You have more than one book-day, you will need to loop:

$("#iFrameResizer0").contents().find(".book-day button").each(function() {
     $(this).parent().toggleClass('disabled',$(this).is('.disabled'));
}) 

or perhaps

$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
   $(this).parent().addClass('disabled');
})

PS: To remove them you do not need to give them a class:

$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
   $(this).parent().remove;
})

If you still have issue with the timing, try this script right after the iframe tags - right after the </iframe>

<script>
$("#iFrameResizer0").on("load",function() {
  $("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
    $(this).parent().remove(); // or .addClass('disabled');
  })
})
</script>

UPDATE: Alternatively drop the iFrame completely:

Replace the iframe tags with <div id="iFrameResizer0"></div>

and add

<script>
$("#iFrameResizer0").load("/wp-json/ssa/v1/embed-inner?integration.../type/Reservierung",function() {
    $("#iFrameResizer0").find(".book-day button.disabled").each(function() {
      $(this).parent().remove(); // or .addClass('disabled');
    });
});
</script>

---

Example pretending your iframe.content() works as expected (same origin)

 $(function() { // on page load. This might STILL be too early $("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() { $(this).parent().addClass('disabled'); }) });

 .disabled { background-color: grey }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="iFrameResizer0"> <div class="book-day disabled"> <button class="disabled">Button Text</button> </div> <div class="book-day"> <button class="active">Button Text</button> </div> <div class="book-day disabled"> <button class="disabled">Button Text</button> </div> </div>

Answer 2

You don't have to check for every button if it has disabled class or not. You can directly select those button having disabled class.

In Javascript, you have to iterate for all the buttons having disabled class, and add disabled class to it's parent. However, in jQuery, as you can see, you can achieve that, without using any loop.

For JavaScript :

$(document).ready(function() {
  var all = document.querySelectorAll('#iFrameResizer0 .book-day button.disabled');
  all.forEach((item) => {
    item.parentElement.classList.add('disabled');
  })
});

For jQuery :

$("#iFrameResizer0 .book-day button.disabled").parent().addClass('disabled');

Answer 3

Since the iframe is observing same-origin policy, This is possible.

First you need to select your iframe element using the following JS

var iframe = document.getElementById('iFrameResizer0'); 

Now you need to get the content in your iframe

var iframeContent = iframe.contentDocument;

Then select elements inside your Iframe which you wish to modify

var iframeElement = iframeContent.getElementsByClassName("book-day");
var i = 0, ilen = iframeElement.length - 1;
for (var i = 0; i < ilen; i++) {
var button = iframeElement.getElementsByTagName("button");
if(button.className == 'disabled')
{
 iframeElement[i].className == 'disabled';
}
}

Then hide your element using CSS display:none property

.disabled {display:none;}