替换 h1 标记条件语句

Question

我正在以非常简单的布局处理页面：H1 后跟图像，然后是 H2。内容是动态生成的，因此如果没有图像，布局将从 H1 更改，然后是 H2。发生这种情况时，H2 中的文本必须在屏幕上居中而不是图像。我创建了另一种称为 H3 的样式，这样当没有图像时，H1 紧跟 H2，然后 H2 变成 H3。

$('h2').replaceWith(function() {
   if ('h2' after 'h1') {
      return $("<h3 />", { html: $(this).html() });
   } )

我似乎无法正确语法。

Answer 1

使用 CSS 的相邻同级选择器 （+）：

h1 + h2 { text-align:center; }

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

h1 { text-align:center; }
h1 + img + h2 { background-color:red; }
h1 + h2 { text-align:center; }

<h1>H1</h1>
  <img src="#"/>
  <h2>H2</h2>
<hr>
<h1>H1</h1>
  <h2>H2</h2>