如何通过JQuery添加无法通过HTML5验证的iFrame属性

Question

I have some iFrames on an HTML5 page, each with the class "a-iframe". There are about 4 of these frames, all of different shapes and sizes, on the page.

How do I get each of these frames, by class name and apply these attributes, that will not validate in HTML by W3C validator:

scrolling="no" frameborder="0" allowtransparency="true"

My current code, that does not work right, is below:

<script type="text/javascript">
    $.each($(".a-iframe"), function() 
    {   
        $(this).attr({
            scrolling: "no",
            frameborder: "0",
            allowtransparency: "true"
        });     
     });
</script>

Answer 1

This should do the trick.

 $(document).ready(function() { $(".a-iframe").each(function() { $(this).attr({ scrolling: "no", frameborder: "0", allowtransparency: "true" }); console.log($(this)); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <iframe src="#" class="a-iframe" scrolling="no" frameborder="0" allowtransparency="true"></iframe> 

Answer 2

After I play your codes for awhile, I observed on jsfiddle that maybe it's because whether the scrollbar is showed or not is determined when content load-in, not when attribute is set, so I altered to this:

Edited: These code will work on my web:

$('.a-iframe').attr({
    scrolling: "no",
    frameborder: "0",
    allowtransparency: "true"
  });

When use selector, you'll get the array of all that mets the selector, and jquery functions can apply to them all at once.

 $(function() { $('.a-iframe').attr({ scrolling: "no", frameborder: "0", allowtransparency: "true" }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <iframe class="a-iframe" src="https://jsfiddle.net/"></iframe> <iframe data-aa="74836" class="a-iframe" src="https://ad.a-ads.com/74836?size=468x60" style="width:468px;height:60px;border:0px;border-width:0px;border-style:none;bor‌​der-color:transparent;background-color:#FFFFFF;overflow:hidden !important;padding: 0px !important;margin: 0px !important;"></iframe> <iframe class="a-iframe" src="https://validator.w3.org/check"></iframe>