jQueryFind不適用于HTML模板

我有一個 Shopify 液體，我加載到 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>

uj5u.com熱心網友回復：

The issue is because the <script> tag is of type="text/template". This means that the HTML within it is not rendered as part of the DOM, but instead treated as plain text.

Therefore, to get the content from it, you need to parse the string to create a DOM from it and then use jQuery (or plain JS) methods to retrieve whatever values you need from it. Try this:

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>

uj5u.com熱心網友回復：

Are you sure the template parser replaces {{ product.description }} only? I suspect it replaces the whole <script></script> block. Try this way:

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

標籤：javascript html 查询 购物

上一篇：Androidstudio自定義自動完成

下一篇：為什么IntelliJ給我的是包的名字，而另一個包的名字卻在括號里？