title: How to extract content from a full page HTML string using jQuery find
body: <p>I have a TypeScript method that is designed to extract specific partial view elements from an incoming Ajax-loaded HTML string (if it is a full view).</p>
  
  <p>The line below returns a 0 length, even though the string contains an element with <code>class="body-content"</code>:</p>
  
  <pre><code>$(html).find('.body-content')
  </code></pre>
  
  <p>Function:</p>
  
  <pre><code>    // Extract a panel from a HTML string
      // Allow for multiple child elements
      private _extractPanel(html: string): JQuery
      {
          var $panel: JQuery;
  
          // Test for full vs. partial view in html
          if (/&lt;html&gt;/i.test(html))
          {
              // Full view: Match the content selector and extract its children
              $panel = $(html).find('.body-content').first().children();
              // *** THE LINE ABOVE GIVES ZERO MATCHES! ***
          }
          else
          {
              // Partial view: Simply return the entire partial view
              $panel = $(html);
          }
          return $panel;
      }
  </code></pre>
  
  <p>Is it because the root is an <code>HTML</code> element or something else I have missed? <code>$(html)</code> returns an object with a length of 63, but the <code>find</code> returns no matches.</p>
  
  <p>Here a sample of an <code>html</code> parameter value from the debugger:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Index - My ASP.NET Application&lt;/title&gt;
          &lt;link href="/Content/bootstrap.css" rel="stylesheet" /&gt;
          &lt;link href="/Content/site.css" rel="stylesheet" /&gt;
          &lt;script src="/Scripts/modernizr-2.7.2.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
   &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                      &lt;/button&gt; &lt;a class="navbar-brand" href="/"&gt;jQuery Tardis&lt;/a&gt;
  
                  &lt;/div&gt;
                  &lt;div class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Home/About"&gt;About&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Home/Contact"&gt;Contact&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="/Account/Register" id="registerLink"&gt;Register&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Account/Login" id="loginLink"&gt;Log in&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container body-content"&gt;
              &lt;div id="testpanel" class="row"&gt;
                  &lt;div class="AddinListView"&gt; &lt;a href="/"&gt;Home&lt;/a&gt;
  
                       &lt;h2&gt;Tardis transition examples&lt;/h2&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="/Transition/Transition/1?transition=none" target="_self"&gt;No transition (hide/show)&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Transition/Transition/1?transition=slide" target="_self"&gt;Slide out/in&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Transition/Transition/1?transition=fade" target="_self"&gt;Fade out/in transtions&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;hr /&gt;
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; 2014 - My ASP.NET Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h2>Followup: <a href="http://jsfiddle.net/TrueBlueAussie/7AvmW/2/" rel="nofollow">http://jsfiddle.net/TrueBlueAussie/7AvmW/2/</a></h2>
  
  <p>Based on the answer from <code>Jack</code>, I put together the above JSFiddle to see what is going on.</p>
  
  <h2>Result:</h2>
  
  <p><strong>Basically <code>$(html)</code> on a string containing <em>invalid child elements</em>, like <code>HTML</code> <code>HEAD</code> and <code>BODY</code>, those elements are unwrapped by jQuery.</strong> The effect I found of course was a flattening <em>of the first level of the BODY</em> only back to become root elements.</p>
  
  <h2>Solution:</h2>
  
  <p>The easiest solution is to always create the page element with a dummy parent element to search from.</p>
  
  <p>e.g.</p>
  
  <pre><code>$html =$('&lt;div&gt;').html(html);
  </code></pre>
  
  <p>then any typical search will work:</p>
  
  <pre><code>$html.find('.selector');
  </code></pre>