jQuery append не отображает html - он отображается как текст

#html #jquery #css

#HTML #jquery #css

Вопрос:

Я использую jQuery для перемещения сегментов, которые находятся в классах product-price и product-color, и добавления к содержимому класса product-title (в скобках и через запятую с другим интервалом), однако он отображается как текст вместо 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 !='' amp;amp; 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>

1. Каковы ожидаемые результаты? Запуск фрагмента здесь, на странице, не показывает никаких дополнительных кавычек

2. Я прояснил проблему и обновил код. Новый интервал, который я пытаюсь добавить, добавляется с кавычками вокруг него. Вы можете увидеть это во 2-м продукте. Я новичок в jQuery и не уверен, правильно ли я это делаю. Я хочу, чтобы диапазон был html, а не отображался как есть.

Ответ №1:

Внутри вашего цикла while выполните итерацию, используя метод jQuery .eq, например:

 if (value1.innerHTML != '' amp;amp; 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, ')');
}

Извините, что перепутал пробелы. Пожалуйста, дайте мне комментарий, если это поможет 😉