Filtering child html element from parent

I'm trying to get the inner element of the container with .filter(). But it return undefined until searching it within parent element with .find(); How can I search it directly with .filter() only without the need to use .find() ?

So the output will like this : <p class="para">This Paragraph Contents</p>

$(document).ready(() => {
  let $htmlEl = `
                <body>
                    <div class="container">
                       <div class="body-content">
                           <p class="para">This Paragraph Contents</p>
                       </div>
                    </div>
                </body>
            `;
  let $res = $($htmlEl);
  let $parentHtml = $res.filter('.container').html();
  let $childHtml = $res.filter('.body-content').html();
  // alert($res.filter('.container').find('.body-content').html());
  // alert($parentHtml);
  console.log($childHtml);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Solution

Filter works on a selection

Instead you can use a selector and scope it, I guess that is the same as find, but why is find not allowed?

$(document).ready(() => {
  let $htmlEl = `<body>
    <div class="container">
      <div class="body-content">
        <p class="para">This Paragraph Contents</p>
      </div>
    </div>
  </body>`;
  
  let $res = $($htmlEl);
  $("body").append($res)
  let $childHtml = $('.body-content',$res).html().trim()
  console.log($childHtml);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>