1

Здравствуйте!

Есть следующая конструкция:

<div><h3 class="ItemTitle">Техника марки Bosch</h3></div> <div><h3 class="ItemTitle">Техника марки Hansa</h3></div> <div><h3 class="ItemTitle">Техника марки Indesit</h3></div>

Пытаюсь с помощью JQuery словосочетанию "Техника марки" в h3 заголовке добавить тег span следующим образом:

$('h3.ItemTitle').html($('h3.ItemTitle').html().replace('Техника марки', '<span>Техника марки</span>'));

Скрипт срабатывает, span к словосочетанию добавляется, но на выходе ВСЕ заголовки в коде становятся как первый т.е. вместо марок техники которые изначально в заголовках везде идет Bosch Получается вот так:

<div><h3 class="ItemTitle"><span>Техника марки</span>Bosch</h3></div> <div><h3 class="ItemTitle"><span>Техника марки</span>Bosch</h3></div> <div><h3 class="ItemTitle"><span>Техника марки</span>Bosch</h3></div>

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

Благодарю за ответ!

1
  • Попробуйте вместо html().replace вставить foreach. А замену проводить уже внутри foreach.
    – reshu
    6 июл 2017 в 15:43

1 ответ 1

2

Примените код "подмены" для каждого h3.ItemTitle. В противном случае, $('h3.ItemTitle').html() будет брать содержимое только из первого h3.ItemTitle и подставлять его в другие.

$('h3.ItemTitle').each(function() {
  $(this).html($(this).html().replace('Техника марки', '<span>Техника марки</span>'));
});
h3.ItemTitle span {
  font-style:italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3 class="ItemTitle">Техника марки Bosch</h3>
</div>
<div>
  <h3 class="ItemTitle">Техника марки Hansa</h3>
</div>
<div>
  <h3 class="ItemTitle">Техника марки Indesit</h3>
</div>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.