問(wèn)候堆棧溢出，我已將 html 代碼保存為名為“test”的 js 變量。然后，我嘗試定位特定的（第 5 個(gè)）li 項(xiàng)目，并將 HTML 附加到該項(xiàng)目下方的一行中：var target = $("ul[class='productWrapper']>li:nth-child(5)");
$(test).insertAfter($(target));我相信我在嘗試定位 LI 元素時(shí)遇到語(yǔ)法問(wèn)題，并且不確定 insertAfter 是否是用于此任務(wù)的正確方法。歡迎您提出所有想法！
1 回答
慕村9548890
TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
我冒昧地在它周?chē)砑恿烁啾尘靶畔ⅲ坪豕ぷ鞯煤芎?。我稍微改變了你的語(yǔ)法，但沒(méi)有改變所討論的主線(xiàn)。有兩個(gè)元素只是為了清楚地表明 .insertAfter() 擊中了正確的元素，而且只有那個(gè)元素。
這是底部帶有腳本的 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="http://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>
頁(yè)面完全加載并且腳本完成后，這就是頁(yè)面的外觀，我相信這就是您的想法。
- 1 回答
- 0 關(guān)注
- 138 瀏覽
添加回答
舉報(bào)
0/150
提交
取消