Как я могу заменить некоторые теги HTML между двумя конкретными элементами?

Question

У меня есть этот HTML:

 <div class="header">A subject</div>
    <span class="start"></span>
    <table>
     <tbody>
      <tr><td>1</td></tr>
     </tbody>
    </table>
    <p>a paragraph</p>
    <span class="end"></span>
    <div class="footer">a note</div>

Также у меня есть переменная, которая содержит некоторые другие теги, как это:

var html = "<section> something <a href="#">my link</a> </section>;

Все, что я хочу сделать, это заменить все между .start и .end переменной html. Как я могу это сделать?

Это ожидаемый результат:

 <div class="header">A subject</div>
    <span class="start"></span>
    <section> something <a href="#">my link</a> </section>
    <span class="end"></span>
    <div class="footer">a note</div>

Поскольку никакой оболочки не существует, я не могу использовать функции .html() или .replaceWith(). Есть ли идея?

javascript jquery html

2

Martin AJ 24 Апр 2017 в 21:05

Answer 1

Для этого вы можете выбрать .start, а затем nextUntil() выбрать элементы между ними и .end перед их удалением. Затем вы можете вставить новый контент после .start, например так:

$('.start').nextUntil('.end').remove();
$('<section> something <a href="#">my link</a></section>').insertAfter('.start');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">A subject</div>
<span class="start">START</span>
<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
<p>a paragraph</p>
<span class="end">END</span>
<div class="footer">a note</div>

6

Rory McCrossan 24 Апр 2017 в 18:10

Answer 2

Поскольку вы используете jQuery, вы можете использовать метод .nextUntil(). Это позволит вам выбрать диапазон элементов, пока элемент не будет указан в качестве параметра метода.

$('.start').nextUntil('.end') выберет каждый элемент от .start до .end (независимо от того, насколько музыкальным это может звучать).

После этого вы можете удалить выбранные элементы и добавить нужный HTML с помощью .before().

$('.start').nextUntil('.end').remove();
$('.end').before(myHTMLVariable);

(Для справки: https://api.jquery.com/nextUntil/).

1

Lucas Medina 24 Апр 2017 в 18:24

Как я могу заменить некоторые теги HTML между двумя конкретными элементами?

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript