Jquery 获取外部 html 并隐藏带有 class 的元素

Question

我有以下标记

<div>
   <div class="myclass">
      <p>some text <span class="my-other-class">abc</span></p>
      <p>some text <span class="my-other-class">abc</span></p>
      <p>some text <span class="my-other-class">abc</span></p>
      ...
   </div>
</div>

我使用以下方法获取元素的外部 html：

var html = $('.myclass').prop('outerHTML');

返回的 html 有一些我想隐藏的带有 class .my-other-class 的元素。在返回的 html 中隐藏那些元素而不是在原始元素中隐藏这些元素的语法是什么？所以类似的东西：

$html.('.my-other-class').hide()

Answer 1

您可以克隆元素 .myclass，然后在克隆的元素中隐藏 .my-other-class：

var clone = $('.myclass').clone();

// use .remove() if you want to remove it from the html returned
clone.find('.my-other-class').hide(); 

console.log(clone[0].outerHTML) // or clone.prop('outerHTML')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <div class="myclass">
      <p>some text <span class="my-other-class">abc</span></p>
      <p>some text <span class="my-other-class">abc</span></p>
      <p>some text <span class="my-other-class">abc</span></p>
   </div>
</div>

Jquery 获取外部 html 并隐藏带有 class 的元素

Jquery get outer html and hide element with class

jquery

hide