javascript - 使用 jQuery 在第 n 个段落之后移动元素

Question

我想移动一个div #inject从原来的位置到第 7 段之后 #mw-content-text .

到目前为止我有这个$('#inject').insertAfter('#mw-content-text > p:nth-child(7)');这正在移动 #inject div 到内部第 7 个元素之后 #mw-content-text仅当第 7 个元素是 <p> 时，如果它有所不同，它不会做任何事情。

例如，如果文章具有以下结构(因为第 7 个元素是 <p>)

<div id="mw-content-text">
    <table></table>
    <h2></h2>
    <p></p>
    <p></p>
    <p></p>
    <h2></h2>
    <p></p>
    /* div #inject is injected here */
    <p></p>
    <h2></h2>
    ...

另一方面，如果文章看起来像这样(如果第 7 个元素是 <h2>)，那么它什么都不做

<div id="mw-content-text">
    <table></table>
    <h2></h2>
    <p></p>
    <p></p>
    <h2></h2>
    <p></p>
    <h2></h2>
    <p></p>
    <p></p>
    <h2></h2>
    <p></p>
    ...

有人能看出我做错了什么吗？引用第 7 个 <p> 的正确方法是什么？ #mv-content-text 中的元素而不是第 7 个元素，只有当它是 <p> 时？

Answer 1

使用 p:nth-of-type(7)而不是 p:nth-child(7) .

详细信息:

• p:nth-child(7)表示如果元素是<p>，请给我该元素元素，如果它是其父元素的第 7 个 ^th 子元素
• p:nth-of-type(7)表示给我第 7 个 <p>元素