jQuery的find方法对HTML template模板不生效（Shopify Liquid场景）

type="text/template"的<script>标签内部的内容不会被浏览器解析为DOM节点，仅会作为纯文本存储在标签内。
你直接调用$('#description').find('h4')时，jQuery是在已渲染的DOM树中查找#description节点的子元素，而#description本身没有DOM子节点，只有文本内容，所以自然无法匹配到h4元素。
之前调用html()能正常输出内容，是因为html()方法直接读取的是标签内部的原始文本，不需要依赖DOM解析。

先将模板内的文本内容转换为临时DOM对象，再执行查找操作即可，示例代码如下：

// 读取模板文本内容，转换为jQuery可操作的DOM对象
const templateContent = $($('#description').html());
// 从转换后的DOM对象中查找h4节点
templateContent.find('h4').each(function() {
  console.log($(this).html());
});

如果后续需要将模板内容插入到页面中，直接使用转换后的templateContent对象即可，无需重复处理：

// 插入到页面指定容器中
$('.your-target-container').append(templateContent);

内容的提问来源于stack exchange，提问作者xtremeCODE