Question

我有以下HTML布局

<div id="wizard-step-content" class="wizard-step-content row-fluid">
    <div id="accordion">
        <div>
            <article class="orderwizard-module orderwizard-module-proxy-addresses-opc">
                <h3 class="section-header">Enter Shipping Address</h3>
                <article class="orderwizard-module orderwizard-module-proxy-addresses-opc module-rendered">
                   other tags
           </article>
           </article>
       </div>
        <div>
            <article class="orderwizard-module orderwizard-payment">
                <article class="orderwizard-module orderwizard-module-payment">
                   other tags no H3
                </article>
                <h3 class="section-header">Enter Payment</h3>
                <article class="orderwizard-module orderwizard-module-payment">
                   other tags
                </article>
           </article>
       </div>
    </div>
</div>

我需要做的是将H3标签向上移动两级，以便在div手风琴和div之间。问题是我在手风琴标签下有几个不仅仅是一个。所有都在同一层次结构下，但有些标签在第一个H＃之前有其他标签。我只想移动我发现的第一个H3标签，如果有多个我只想移动第一个。请帮忙。

此代码由一个单独的进程自动生成，因此我不能只修改它以将其呈现在不同的位置。

我有这个脚本可以工作，但它将H3标记放在<div id="accordion">的底部标签输入顺序不正确。

$('#accordion').children('div').children('article').each(function() { $('article h3:first-child').detach().appendTo($(this).parent().parent())});

Answer 1

如果我正确理解您的要求，那么您当前代码的问题在于它针对所有匹配的artcles的第一个h3，而不仅仅是每篇文章中相关的h3。

试试这个：

$('#accordion > div > article').each(function () {
    $(this).find('h3').insertBefore($(this).parent())
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/pkfpswbq/1/

备注：

在DOM中移动元素时，您不需要先将它们分离。

使用jQuery将HTML标记向上移动两个级别

1 个答案: