Tengo un líquido de Shopify que cargo en una plantilla HTML
<script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> </script> <script> $("#description").each(function() { console.log($(this).html()); }); </script>Por alguna razón, find no funciona
<script> $("#description").find('h4').each(function() { console.log($(this).html()); }); </script> Esto es lo que devuelve {{ product.description }}
<div class="product-ddd"> <h4>DETAILS & 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 & CARE</h4> </div>Esta es la plantilla de script final
<script type="text/template" id="hesdsdllo"> <div class="product-ddd"> <h4>DETAILS & 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"> </p> <h4>FABRIC CONTENT & CARE</h4> </div> </script>El problema se debe a que la etiqueta <script> es de type="text/template" . Esto significa que el HTML que contiene no se representa como parte del DOM, sino que se trata como texto sin formato.
Por lo tanto, para obtener el contenido, debe analizar la cadena para crear un DOM a partir de ella y luego usar los métodos jQuery (o JS simple) para recuperar los valores que necesite de ella. Prueba esto:
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 & 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 & CARE</h4> </div> </script>¿Está seguro de que el analizador de plantillas reemplaza solo a {{ product.description }} ? Sospecho que reemplaza todo el bloque <script></script> . Prueba de esta manera:
$(".product-ddd h4").each(function(){ console.log($(this).html()); });