Question

我有这个HTML：

＆＃13;

 <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>

＆＃13;

此外，我还有一个包含其他标签的变量：

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

我想做的就是用.start变量替换.end和html之间的所有内容。我怎么能这样做？

这是预期的结果：

＆＃13;

 <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>

＆＃13;

由于没有任何包装器，因此我无法使用.html()或.replaceWith()函数。有什么想法吗？

Answer 1

要实现此目的，您可以选择.start，然后使用nextUntil()在删除它们之前选择它与.end之间的元素。然后，您可以在.start之后插入新内容，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

由于您使用的是jQuery，因此可以使用.nextUntil()方法。它允许您选择一系列元素，直到元素被指定为方法的参数。

$('.start').nextUntil('.end')会从.start中选择每个元素，直到.end（无论这听起来多么合理）。

之后，您可以删除所选元素，并使用.before()添加所需的HTML。

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

（供参考：https://api.jquery.com/nextUntil/）

如何在两个特定元素之间替换某些HTML标记？

2 个答案: