title: Change background color of body element inside an iframe
body: <p>I have the following code:</p>
  
  <pre><code>    &lt;table id="first"&gt;
         &lt;tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker"&gt;
            &lt;td class="my-input"&gt;
              &lt;input type="text" class="wp-color-picker"&gt; 
            &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg"&gt;
            &lt;td class="my-input"&gt;
               &lt;iframe&gt;
                  &lt;html&gt;
                    &lt;body id="tinymce" class="mce-content-body"&gt;
                         some text
                    &lt;/body&gt;
                   &lt;/html&gt;
                 &lt;/iframe&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/table&gt;
     &lt;table id="second"&gt;
        &lt;tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker"&gt;
           &lt;td class="my-input"&gt;
              &lt;input type="text" class="wp-color-picker"&gt; 
           &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg"&gt;
            &lt;td class="my-input"&gt;
                &lt;iframe&gt;
                    &lt;html&gt;
                      &lt;body id="tinymce" class="mce-content-body"&gt;
                           some text
                      &lt;/body&gt;
                    &lt;/html&gt;
                &lt;/iframe&gt;
            &lt;/td&gt;
         &lt;/tr&gt;
     &lt;/table&gt;
  </code></pre>
  
  <p>On load, I would like to change the <code>background-color</code> to all <code>body</code> elements (which is inside an <code>iframe</code>) to be the value of whatever is in the text input that is in the same <code>tr</code> level as the parent <code>tr</code> of the <code>body</code>. </p>
  
  <p>So I need to get all <code>body</code> elements inside <code>tr['data-type="wysiwyg"] iframe</code> and then set that <code>body</code> elements css background to the value of the closest <code>tr['data-name"background_colour"]</code> siblings <code>input.wp-color-picker</code>. </p>
  
  <p>Hope this makes sense. iframe is in the same domain.</p>
  
  <p>UPDATE: I am able to target the correct <code>body</code> but now I need to figure out how to get the text input value that's in another <code>tr</code> but the same level as the parent <code>tr</code> of <code>body</code> and use that as the body's background-color.
  Demo: <a href="https://jsfiddle.net/pgr8wzqb/9/" rel="nofollow">https://jsfiddle.net/pgr8wzqb/9/</a> </p>