尝试以无序列表中的特定数字 LI 项目为目标并追加 html

Question

问候 Whosebug，

我已将 html 代码保存为名为 'test' 的 js 变量。

然后我尝试定位一个特定的（第 5 个）li 项目并在其下的一行中附加 HTML ：

var target = $("ul[class='productWrapper']>li:nth-child(5)");

$(test).insertAfter($(target));

我认为我在尝试定位 LI 元素时存在语法问题，我不确定 insertAfter 是否是用于此任务的正确方法。

欢迎您的所有想法！

Answer 1

我认为无论你有什么都是对的，@JoeG。我冒昧地在它周围添加了更多的上下文，它似乎工作得很好。我稍微改变了你的语法，但没有改变有问题的主线。有两个元素只是为了明确 .insertAfter() 击中了正确的一个，而且只有那个。

这是底部带有脚本的 HTMl。

<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <style>
        body { display: flex; flex-direction: column; }
        ul { display: inline-block; list-style-type: none; text-align: left; background: #ccc; border-radius: 1rem; padding: 1rem; margin: 2rem auto; }
        .inserted { color: green;}
    </style>
</head>
<body>
    <ul class="productWrapper">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>Sixth</li>
    </ul>
    <ul class="someOtherClass">
        <li>Other First</li>
        <li>Other Second</li>
        <li>Other Third</li>
        <li>Other Fourth</li>
        <li>Other Fifth</li>
        <li>Other Sixth</li>
    </ul>

    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        const $target = $(`ul[class='productWrapper']>li:nth-child(5)`)
        const $test = $(`<li class='inserted'>Inserted after fifth</li>`);
        $test.insertAfter($target);
    </script>
</body>
</html>

页面完全加载且脚本完成后，页面是这样的，我相信这就是您的想法。

尝试以无序列表中的特定数字 LI 项目为目标并追加 html

Attempting to target a particular number LI item in an unordered list and append html

javascript

jquery

html

html-lists

targeting