移动<li>到第 n 个位置并使用 JavaScript 更改 href 链接

Question

我想将列表中的第一项移动到第 10 位，并使用 JavaScript 将 href 链接从“collections/all”更改为“collections/all/cotton”。 没有向元素添加 id 的选项，没有它可以做到吗？

 <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>

Answer 1

我在下面的 JavaScript 的每个步骤之前都包含了注释。 如果有不清楚的地方，请随时在评论中提问。

 // Select the unordered list by its classes const list = document.querySelector('ul.tags.tags--collection.inline-list'); // Select the 1st item in the list by its position const first = list.querySelector(':scope > li:nth-child(1)'); // Select the 10th item in the list by its position const tenth = list.querySelector(':scope > li:nth-child(10)'); // Move the 1st item after the 10th. // Inserting removes an item from its parent and inserts it into the new location. // This shifts the 10th item into position 9, and the first item into position 10. tenth.insertAdjacentElement('afterend', first); // Select the anchor within the list item and modify its "href" property first.querySelector(':scope > a').href = 'collections/all/cotton';

 <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>

Answer 2

你需要做一些操作

将list.querySelectorAll("li")[0]行中的 [0] 更改为您需要的从零开始的数字

 const list = document.querySelector("ul.tags.tags--collection.inline-list"); // or use an ID const li = list.querySelectorAll("li")[0]; // or list.firstElementChild const link = li.querySelector("a"); link.href = link.href.replace("all","all/cotton"); console.log(link.href); list.insertBefore(li, list.children[10]); // note to move to the end, just use list.append(li)

 <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>