HTML working with jQuery template

Question

我有一个Shopify liquid我加载到HTML模板

<script type="text/template" id="description">
  <div class="product-ddd">
    {{ product.description }}
  </div>

</script>
<script>
  $("#description").each(function() {
    console.log($(this).html());
  });
</script>

由于某些原因，find无法工作。

<script>
  $("#description").find('h4').each(function() {
    console.log($(this).html());
  });
</script>

这是{{ product.description }}返回的内容

<div class="product-ddd">
  <h4>DETAILS &amp; DIMENSIONS</h4>
  <p>A trendy fashion-forward look has never been so comfortable. This full-length maxi dress for women is a must-have year-round style. Featuring a lovely scoop neckline, elbow-length sleeves, full A-line skirt, ankle-length hemline, and it is made from
    a soft comfortable stretch material. Pair this maxi dress with a denim or leather jacket for a stylishly edgy look. Available in four stylish colors and it is machine washable for easy care. Made in the USA from a comfortable stretch material.
  </p>
  <h4>FABRIC CONTENT &amp; CARE</h4>
</div>

这是最终的脚本模板

<script type="text/template" id="hesdsdllo">
  <div class="product-ddd">
    <h4>DETAILS &amp; DIMENSIONS</h4>
    <p>A trendy fashion-forward look has never been so comfortable. This full-length maxi dress for women is a must-have year-round style. Featuring a lovely scoop neckline, elbow-length sleeves, full A-line skirt, ankle-length hemline, and it is made from
      a soft comfortable stretch material. Pair this maxi dress with a denim or leather jacket for a stylishly edgy look. Available in four stylish colors and it is machine washable for easy care. Made in the USA from a comfortable stretch material.
      <br
        data-mce-fragment="1">&nbsp;</p>
    <h4>FABRIC CONTENT &amp; CARE</h4>
  </div>
</script>

Answer 1

这个问题是因为<script>标签是type="text/template"的。这意味着其中的HTML不会呈现为DOM的一部分，而是作为纯文本处理。

因此，要从其中获取内容，需要解析字符串以从其中创建DOM，然后使用jQuery (或普通JS)方法从其中检索所需的任何值。试试这个：

​

let htmlTemplate = $("#description").text();
$(htmlTemplate).find('h4').each(function() {
  console.log($(this).html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/template" id="description">
  <div class="product-ddd">
    <h4>DETAILS &amp; DIMENSIONS</h4>
    <p>A trendy fashion-forward look has never been so comfortable. This full-length maxi dress for women is a must-have year-round style. Featuring a lovely scoop neckline, elbow-length sleeves, full A-line skirt, ankle-length hemline, and it is made from
      a soft comfortable stretch material. Pair this maxi dress with a denim or leather jacket for a stylishly edgy look. Available in four stylish colors and it is machine washable for easy care. Made in the USA from a comfortable stretch material.
    </p>
    <h4>FABRIC CONTENT &amp; CARE</h4>
  </div>
</script>

​

Answer 2

您确定模板解析器仅替换{{ product.description }}吗？我怀疑它取代了整个<script></script>代码块。尝试这样做：

$(".product-ddd h4").each(function(){
    console.log($(this).html());
});