Javascript 如何使用可以输入控制台的内容更改此列表的顺序？

已回答黄色方框报价，请参阅编辑以了解后续问题。都解决了

我有一个类似于HTML的列表

<div class="verticalSection verticalSection-extrabottompadding">
  <h2 class="sectionTitle">
  Library Order
  </h2>
  <div class="paperList viewOrderList">
      <div class="listItem viewItem" data-viewid="9d7ad6afe9afa2dab1a2f6e00ad28fa6">
      <div class="listItem viewItem" data-viewid="9ec840fc98bc99fab0bc952ee46828ad">
      <div class="listItem viewItem" data-viewid="8860bba0ebc5d09e4d27fd85301c257b">
      <div class="listItem viewItem" data-viewid="7e64e319657a9516ec78490da03edccb">
      <div class="listItem viewItem" data-viewid="b7a798670696afa9a252916ed4f11f47">
      <div class="listItem viewItem" data-viewid="c08a027359459c36152044a7dca3df81">
      </div>
  </div>   What can i input into console to change the order of those? lets say i want

.listItem.viewItem data-viewid="7e64e319657a9516ec78490da03edccb"

我该怎么做？我对这件事的了解非常有限，但受到限制 花点时间在谷歌上，我认为用这个JQuery就可以做到

$('.listItem.viewItem').insertAfter('.listItem.viewItem'); But then the class listItem.viewItem also has the data-viewid attached to

以我有限的知识，这就是我目前所处的困境 我不知道如何正确设置命令的格式

编辑：

---

如果我想以一种特定的方式设置列表，而不需要代码依赖于另一个值，那么代码会是什么样子？假设我想要这个特定的列表：

1. 9d7ad6afe9afa2dab1a2f6e00ad28fa6

2. 9ec840fc98bc99fab0bc952ee46828ad

3. 8860bba0ebc5d09e4d27fd85301c257b

4. b7a798670696afa9a252916ed4f11f47

5. c08a027359459c36152044a7dca3df81

6. 7e64e319657a9516ec78490da03edccb

每次我把代码输入控制台时，不管之前的顺序是什么，值都会按这个顺序排列该代码是什么样子的？

我想是这样的吧

$('.listItem.viewItem[data-viewid="9d7ad6afe9afa2dab1a2f6e00ad28fa6"]') additional command here
$('.listItem.viewItem[data-viewid="9ec840fc98bc99fab0bc952ee46828ad"]') additional command here
$('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]') additional command here
$('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]') additional command here
$('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]') additional command here
$('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]') additional command here

试试这个

let ids = ['9d7ad6afe9afa2dab1a2f6e00ad28fa6',
    '9ec840fc98bc99fab0bc952ee46828ad',
    '8860bba0ebc5d09e4d27fd85301c257b',
    'b7a798670696afa9a252916ed4f11f47',
    'c08a027359459c36152044a7dca3df81',
    '7e64e319657a9516ec78490da03edccb'];

for (let i = ids.length - 1; i > 0; i--) { 
    $('.listItem.viewItem[data-viewid="'+ids[i-1]+'"]').insertBefore('.listItem.viewItem[data-viewid="'+ids[i]+'"]');
}

---

嗯，我做到了，这可能是一个非常丑陋的方式，但它的工作

/* LIBRARY ORDER - List 9d7ad6afe9afa2dab1a2f6e00ad28fa6 First */
$('.listItem.viewItem[data-viewid="9d7ad6afe9afa2dab1a2f6e00ad28fa6"]').insertBefore('.listItem.viewItem[data-viewid="9ec840fc98bc99fab0bc952ee46828ad"]').insertBefore('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]').insertBefore('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List 9ec840fc98bc99fab0bc952ee46828ad 2nd */
$('.listItem.viewItem[data-viewid="9ec840fc98bc99fab0bc952ee46828ad"]').insertBefore('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]').insertBefore('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List 8860bba0ebc5d09e4d27fd85301c257b 3rd */
$('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]').insertBefore('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List b7a798670696afa9a252916ed4f11f47 4th */
$('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List c08a027359459c36152044a7dca3df81 5th & 7e64e319657a9516ec78490da03edccb 6th */
$('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

---

首先，您需要有效的html来执行DOM操作->中的所有div元素。纸质列表未关闭。如果在源代码处关闭，如果我想以一种特定的方式设置列表，而不需要代码依赖于其他值，那么代码会是什么样子呢？假设我想要这个列表1。7e64e319657a9516ec78490da03edccb 2。9d7ad6afe9afa2dab1a2f6e00ad28fa6 3。b7a798670696afa9a252916ed4f11f47，每次我将代码输入控制台时，无论之前的顺序是什么，值都将按照代码设置的正确顺序放置。我修改了答案是否可以使其运行多次？到目前为止，如果我再次尝试运行它，我会收到这样一条消息“uncaughtsyntaxerror:Identifier'ids'已经声明为：1:1”，而不是“让”使用“var”，您是最好的！非常感谢你的帮助。是的，这确实奏效了。

/* LIBRARY ORDER - List 9d7ad6afe9afa2dab1a2f6e00ad28fa6 First */
$('.listItem.viewItem[data-viewid="9d7ad6afe9afa2dab1a2f6e00ad28fa6"]').insertBefore('.listItem.viewItem[data-viewid="9ec840fc98bc99fab0bc952ee46828ad"]').insertBefore('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]').insertBefore('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List 9ec840fc98bc99fab0bc952ee46828ad 2nd */
$('.listItem.viewItem[data-viewid="9ec840fc98bc99fab0bc952ee46828ad"]').insertBefore('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]').insertBefore('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List 8860bba0ebc5d09e4d27fd85301c257b 3rd */
$('.listItem.viewItem[data-viewid="8860bba0ebc5d09e4d27fd85301c257b"]').insertBefore('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List b7a798670696afa9a252916ed4f11f47 4th */
$('.listItem.viewItem[data-viewid="b7a798670696afa9a252916ed4f11f47"]').insertBefore('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');

/* LIBRARY ORDER - List c08a027359459c36152044a7dca3df81 5th & 7e64e319657a9516ec78490da03edccb 6th */
$('.listItem.viewItem[data-viewid="c08a027359459c36152044a7dca3df81"]').insertBefore('.listItem.viewItem[data-viewid="7e64e319657a9516ec78490da03edccb"]');