时间戳

首页 > 解决方案 > jQuery 追加不呈现 html - 它显示为文本

html - jQuery 追加不呈现 html - 它显示为文本

问题描述

我正在使用 jQuery 移动位于 product-price 和 product-color 类下的 span，并附加到 product-title 类内容（在括号和逗号中，用另一个 span 分隔），但是它显示为文本而不是 html。有人可以告诉我如何避免这种情况，也许我做错了？谢谢！

   
<html>
<head>
  <title>Playground</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
  <div id="catalog-courses" class="course-listing">
    <a href="#" title="Title1" class="container">
      <div class="imgwrap">
        <div class="ribbon">
          <span class="ribbon-text">Sold Out</span>
        </div>
      </div>
      <div class="product-image">
        <img src="https://picsum.photos/100" alt="Product 1" />
      </div>
      <div class="product-title">Product 1</div>
      <div class="product-description">This is all about product 1</div>
      <div class="product-price">
        <span></span>
      </div>
      <div class="product-color product-callout">
        <span>Blue</span>
      </div>
      <div class="product-tags">
        <span class="product-tag" >
          <span>Tag 1</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 2</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 3</span>
        </span> 
      </div>
      <br/><br/><br/>
    </a> 
    <a href="#" title="Title2" class="container">
      <div class="imgwrap">
        <div class="ribbon">
          <span class="ribbon-text">Available</span>
        </div>
      </div>
      <div class="product-image">
        <img src="https://picsum.photos/100" alt="Product 2" />
      </div>
      <div class="product-title">Product 2</div>
      <div class="product-description">This is all about product 2</div>
      <div class="product-price">
        <span>$10</span>
      </div>
      <div class="product-color product-callout">
        <span>Orange</span>
      </div>
      <div class="product-tags">
        <span class="product-tag" >
          <span>Tag 1</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 2</span>
        </span> 
        <span class="product-tag" >
          <span>Tag 5</span>
        </span> 
      </div>
    </a>
  </div>
  <br/><br/><br/>
  <script>
    $(document).ready(function()
    {

      var i = 0;

      while( i < $('.product-title').length)
      {

        var value1 = $(".product-price span")[0];
        var value2 = $(".product-color span")[0];

        if (value1.innerHTML !='' && value2.innerHTML !='')
        {
          $(this).find('.product-title')[i].append(' \(', '<span class=\"test\">', value1, '\,', value2, '</span>', '\)');
        }
        else if (value1.innerHTML !='') 
        {
          $(this).find('.product-title')[i].append(' \(', value1,value2,'\)');
        }  
        else if (value2.innerHTML !='')
        {
          $(this).find('.product-title')[i].append(' \(', value2,value1,'\)');
        }  
        i++;

      }   
    });
  </script>

</body>
</html>

标签： htmljquerycss

解决方案

Inside your while loop, iterate using .eq jQuery method, like this:

if (value1.innerHTML != '' && value2.innerHTML != '') {
  $('.product-title').eq(i).append('<span class=\"test\">', value1, value2, '</span>');
}
else if (value1.innerHTML != '') {
  $('.product-title').eq(i).append(' \(', value1, value2, '\)');
}
else if (value2.innerHTML != '') {
  $('.product-title').eq(i).append(' \(', value2, value1, '\)');
}

Sorry for messing up with the white spaces. Please give me a +rep if it helps ;)

推荐阅读