jQuery 发现无法使用 HTML 模板

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>

由于某种原因，查找不工作

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

这就是{{ product.description }}returns

<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

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

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

Answer 2

问题是因为 <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>

jQuery 发现无法使用 HTML 模板

jQuery Find not working with HTML template

html

javascript

jquery

shopify