如何在前进到下一个相同或更高的标题后包装所有元素？

时间：2018-03-29 01:39:24

标签： javascript jquery nextuntil

我的内容由标题组成（h1，h2，h3，h4，h5，h6）。

我需要什么：

使用jQuery，我需要在每个标题之后包装所有元素，直到下一个相同的标题或更高的标题。 “更高”，我的意思是说：

  • H5比h6“高”。
  • H4比h5和h6“更高”。
  • H3比h4，h5和h6“更高”。

......依此类推。

E.g。将所有元素包裹在h3之后，直到下一个h3或更高的标题（h1或h2）。

以下是所需最终结果的示例：

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial;
  color: white;
  background-color: black;
  margin: 0;
  padding: 5px;
}

.h1-section,
.h2-section,
.h3-section,
.h4-section,
.h5-section,
.h6-section {
  border: 1px solid black;
  border-top: none;
  padding: 20px;
}
<h1>1</h1>
<section class="h1-section">
  <h2>2</h2>
  <section class="h2-section">
    <h3>3</h3>
    <section class="h3-section">
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
    </section>
  </section>
</section>
<h1>1</h1>
<section class="h1-section">
  <h2>2</h2>
  <section class="h2-section">
    <h3>3</h3>
    <section class="h3-section">
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
    </section>
    <h3>3</h3>
    <section class="h3-section">
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
    </section>
  </section>
  <h2>2</h2>
  <section class="h2-section">
    <h3>3</h3>
    <section class="h3-section">
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
    </section>
    <h3>3</h3>
    <section class="h3-section">
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
      <h4>4</h4>
      <section class="h4-section">
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
        <h5>5</h5>
        <section class="h5-section">
          <h6>6</h6>
          <section class="h6-section">
          </section>
          <h6>6</h6>
          <section class="h6-section">
          </section>
        </section>
      </section>
    </section>
  </section>
</section>

我尝试了什么：

使用jQuery，我尝试使用.nextUntil()，但我错误地选择和包装元素：

$(document).ready(function() {
  $("h1").nextUntil("h1").wrapAll("<section class='h1-section'></section>");
  $("h2").nextUntil("h1, h2").wrapAll("<section class='h2-section'></section>");
  $("h3").nextUntil("h1, h2, h3").wrapAll("<section class='h3-section'></section>");
  $("h4").nextUntil("h1, h2, h3, h4").wrapAll("<section class='h4-section'></section>");
  $("h5").nextUntil("h1, h2, h3, h4, h5").wrapAll("<section class='h5-section'></section>");
  $("h6").nextUntil("h1, h2, h3, h4, h5, h6").wrapAll("<section class='h6-section'></section>");
});
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial;
  color: white;
  background-color: black;
  margin: 0;
  padding: 5px;
}

.h1-section,
.h2-section,
.h3-section,
.h4-section,
.h5-section,
.h6-section {
  border: 1px solid black;
  border-top: none;
  padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>
<h5>5</h5>
<h6>6</h6>
<h6>6</h6>

如何使用jQuery实现预期的结果？

1 个答案:

答案 0 :(得分：1)

问题在于：

$("h5").nextUntil("h5")

将返回 nextUntils的所有，而不仅仅是每个 h5的。即它将获得第一个h5的nextUntils和组合它们与第二个h5的nextUntils等，然后当你应用wrapAll时，它将wrapAll 所有它们，而不是只是个人集。

使用.text()显示此

的示例 

console.log($("h5").nextUntil("h5").length, $("h5").nextUntil("h5").text())
h5,h6 { margin:0; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5></h5><h6>1</h6><h6>2</h6>
<h5></h5><h6>3</h6><h6>4</h6>

因此，您需要一次查看每个h5个

$("h5").each(function() {
    console.log($(this).nextUntil("h5").length, $(this).nextUntil("h5").text())
});
h5,h6 { margin:0; padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5></h5><h6>1</h6><h6>2</h6>
<h5></h5><h6>3</h6><h6>4</h6>

然后，您可以将.length / .text()替换为.wrapAll()：

$("h5").each(function() {
    $(this).nextUntil("h5").wrapAll("<div class='section-h5'>")
});
$("h6").each(function() {
    $(this).nextUntil("h6,h5").wrapAll("<div class='section-h6'>")
});
h5,h6 { margin:0; padding:5px; }
h5 {  margin-top:4px;  }
h6 { }

.section-h5 { padding: 5px; border:1px solid blue; }
.section-h6 { padding: 5px; border:1px solid green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5></h5><h6></h6><div>1</div><h6></h6><div>2</div>
<h5></h5><h6></h6><div>3</div><h6></h6><div>4</div>

（根据需要扩展到其他H级别）

相关问题
最新问题