Question

我有这段代码

<h3 id="3title">Aenean lacinia bibendum.</h3>
<p class="clear">Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget.</p>
    <figure class="clear">
        <img src="img/klint-faaborg-chair.jpg" alt="Faaborg chair">
        <figcaption>Consectetur Fusce Quam</figcaption>
    </figure>

我想在html页面上的h3元素之前添加一个开始div框，在</figure>之后添加一个结束divbox

我尝试过：

<script>
    $( "h3" ).before( "<div class='startdiv'>" );
</script>

但它会输出：

"<div class="startdiv"></div>"

在我所有的h3元素之前。

我做错了什么。我怎样才能在所有h3元素之前创建一个开始div框？

Answer 1

你做不到。你正在操纵DOM 插入开口元素是不可能的。浏览器会自动为您修复它。

相反，你应该为你的用例找到一个更好的解决方案（相信我，有一个）（例如jQuery的wrap函数）。

Answer 2

您应该能够使用此代码完成您的工作：

$('h3').each(function() {
    $(this).nextUntil('figure + *').addBack().wrapAll("<div class='startdiv'>");
});

检查下面的测试演示。

$('h3').each(function() {
    $(this).nextUntil('figure + *').addBack().wrapAll("<div class='startdiv'>");
});

.startdiv {
    background: #EEE;
    margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h3 id="3title">Aenean lacinia bibendum.</h3>
    <p class="clear">Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget.</p>
    <figure class="clear">
        <img src="http://lorempixel.com/50/50" alt="Faaborg chair" />
        <figcaption>Consectetur Fusce Quam</figcaption>
    </figure>

    <h3 id="3title">Aenean lacinia bibendum.</h3>
    <p class="clear">Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget.</p>
    <figure class="clear">
        <img src="http://lorempixel.com/50/50" alt="Faaborg chair" />
        <figcaption>Consectetur Fusce Quam</figcaption>
    </figure>

如何使用jQuery创建一个开放的divbox

2 个答案: