从父元素中过滤子 html 元素

Question

我正在尝试使用 .filter() 获取容器的内部元素。但它 return 未定义，直到使用 .find() 在父元素中搜索它；如何在不需要使用 .find() 的情况下直接使用 .filter() 搜索它？

所以输出会像这样：<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>

Answer 1

过滤器适用于选择

相反，您可以使用选择器并确定范围，我猜这与查找相同，但为什么不允许查找？

$(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>

从父元素中过滤子 html 元素

Filtering child html element from parent

jquery

javascript-objects