Question

我正在创建一个浮动宽度的网站。用户使用全高清分辨率的屏幕到智能手机上的600px，这似乎是个不错的主意。这带来了一个非常有趣的问题。

当用户使用比最佳分辨率更小的分辨率时，页面的高度会更高。这意味着更改某些元素（例如某些图像，搜索框或导航）的顺序可能会有用，以使页面更易读，而不需要流氓。

所以我需要能够访问DOM并更改某些页面元素的顺序（交换它们）。

假设我有一个列表，需要交换第1项和第2项。

<ul>
  <li>1</li>
  <li>2</li>
</ul>

我找到了一个解决方案，该解决方案基于使用函数<ul>将已有项元素附加到appendChild。然而，文本节点存在问题，因为需要再次重新构建整个文本节点，因此对于更困难的元素结构来说它变得非常复杂。

你有什么建议可以改善吗？

Answer 1

对于这个简单的情况（交换仅有的两个元素），您只需使用appendChild()（fiddle）

var list = document.querySelector("ul");
list.appendChild(list.firstElementChild);

同一节点不能存在于多个位置;所以，它从当前位置移除并放置在集合的末尾。

如果你想进行更复杂的排序，你可能应该从childNodes（yaf）创建一个数组并让所有人疯狂：

var list = document.querySelector("ul");
var items = list.querySelectorAll("li");
var sortedList = Array.from(items).sort(function(a, b) {
  var c = a.firstElementChild.textContent,
  d = b.firstElementChild.textContent;
  return c < d ? -1 : c > d ? 1 : 0;
});
for (let item of sortedList) {
  list.appendChild(item);
}

Answer 2

不会交换innerHTML吗？

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML;
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML;
myList.getElementsByTagName("li")[1].innerHTML = temp;

Answer 3

在2018年（以及几年前），仅CSS就有可能实现。您的用例将通过以下方式解决：

@Test
public fun test_correctParkIdMappingGeneration() {

    Mockito.`when`<ParkIdMapping>(parkIdMappingRepository.save(any())).thenAnswer(
        { invocation -> // compiler error
            val mapping = invocation.getArgument<ParkIdMapping>(0)
            mapping.id = 100L
            mapping
        }
    )
    val mapping = parkIdMappingRepository.save(ParkIdMapping("123"))

    assertEquals(100L, mapping.id)
}

改变元素的顺序

3 个答案: