title: How to access child elements?
body: <p>I am using a jquery plugin. After rendering in the browser, the html layout is as following lines of code.  </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;div class="mce-container-body"&gt;
          ...
          &lt;input type="text" id="textedit01"&gt;
          ...
      &lt;/div&gt;
      &lt;iframe&gt;
          &lt;html&gt;
          ...
          &lt;input id="submitbuttonid" type="submit" /&gt;
  
          &lt;script type="text/javascript"&gt;
  
              jQuery(document).ready(function ($) {
                  $('#submitbuttonid"').click(function () {
                      var URL = "http://localhost:61222/14CommunityImages/hands.png";
                      var $container = $(this).parent();
                      $container.toggle();
                      $(".mce-container-body input", $container).val(URL);
                      tinyMCEPopup.close();
                  });
              });
  
          &lt;/script&gt;
  
          ...
          &lt;/html&gt;
      &lt;/iframe&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now the issue is that the code  </p>
  
  <pre><code>var $container = $(this).parent();
  $container.toggle();
  $(".mce-container-body input", $container).val(URL);
  </code></pre>
  
  <p>is accessing the top level html elements. Basically I have to append url value in input tag which is inside .mce-container-body... Please help !!!</p>