问候堆栈溢出，我已将 html 代码保存为名为“test”的 js 变量。然后，我尝试定位特定的（第 5 个）li 项目，并将 HTML 附加到该项目下方的一行中：var target = $("ul[class='productWrapper']>li:nth-child(5)");
$(test).insertAfter($(target));我相信我在尝试定位 LI 元素时遇到语法问题，并且不确定 insertAfter 是否是用于此任务的正确方法。欢迎您提出所有想法！
1 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
我冒昧地在它周围添加了更多背景信息，它似乎工作得很好。我稍微改变了你的语法，但没有改变所讨论的主线。有两个元素只是为了清楚地表明 .insertAfter() 击中了正确的元素，而且只有那个元素。
这是底部带有脚本的 HTMl。
<html dir="ltr">
<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>
页面完全加载并且脚本完成后，这就是页面的外观，我相信这就是您的想法。
- 1 回答
- 0 关注
- 95 浏览
添加回答
举报
0/150
提交
取消