实现两个Li标签的交换 #55

Activity

1. BetaSu

   added

   JSl1：JS 相关l1：JS 相关

   CSSl1：CSS 相关l1：CSS 相关

   HTMLl1：HTML 相关l1：HTML 相关

   动手需要动手敲代码需要动手敲代码

   悬赏10元最佳答题者可以获得 10 元最佳答题者可以获得 10 元

   on Apr 12, 2022
2. NoBey commented on Apr 12, 2022

   

   NoBey

   on Apr 12, 2022

   More actions

   const swap = (
     i,
     j,
     a = $$("li")[i],
     b = $$("li")[j],
     t = document.createElement("div"),
     t2 = document.createElement("div")
   ) =>
     a.replaceWith(t) ||
     b.replaceWith(t2) ||
     t.replaceWith(b) ||
     t2.replaceWith(a);
   
   swap(0, 2)

     <style>
     ul{
       display: flex;
       flex-direction: column;
     }
     </style>
     <ul>
       <li style="order: 3">1</li>
       <li style="order: 2">2</li>
       <li style="order: 1">3</li>
       <li style="order: 4">4</li>
       <li style="order: 5">5</li>
     </ul>
3. Y-J-H commented on Apr 12, 2022

   

   Y-J-H

   on Apr 12, 2022

   Last edited by Y-J-H

   More actions

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <!-- <style>
       // css 想到的是直接利用定位, 缺点就是在dom树中dom的位置是没有变化的, 只是改变了样式位置
       li {
         height: 20px;
         line-height: 20px;
       }
   
       li:nth-child(1) {
         position: relative;
         top: 40px;
         left: 0;
       }
   
       li:nth-child(3) {
         position: relative;
         top: -40px;
         left: 0;
       }
     </style> -->
   </head>
   
   <body>
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
     </ul>
   </body>
   <script>
   
     const li = document.getElementsByTagName('li');
   
     function swapDom() {
       const parent = li[0].parentNode;
   
       // 利用insertBefore()方法只会对dom节点进行移动不会创建新的节点
       parent.insertBefore(li[2], li[0]);
       parent.insertBefore(li[2], li[1]);
     }
   
     swapDom();
   
   </script>
   
   </html>
   
4. jy910222 commented on Apr 12, 2022

   

   jy910222

   on Apr 12, 2022

   Last edited by BetaSu

   More actions

   js方法insertBefore 只改变位置，不新增节点

   function swap(a, b) {
   	const min = Math.min(a, b);
   	const max = Math.max(a, b);
   	const ul = document.querySelector('ul');
   	const li = ul.children;
   
   	ul.insertBefore(li[max - 1], li[min - 1]);
   	ul.insertBefore(li[min], li[max]);
   }
   swap(a, b);

   css

   ul {
     display: flex;
     flex-direction: column;
   }
   ul li:nth-child(1) {
     order: 3;
   }
   ul li:nth-child(2) {
     order: 2;
   }
   ul li:nth-child(3) {
     order: 1;
   }
   ul li:nth-child(4) {
     order: 4;
   }
   ul li:nth-child(5) {
     order: 5;
   }

   注：JS实现中，请考虑头、尾两个节点的边界情况，这时候适用appendChild

   👍React with 👍12Reacted by 喝酒不误事@meanc, Evan Xu, Y-J-H, Virgo(xianguoGou), RandyForest, 卡颂, YeungWanLum, UltraChicken, AnteeHub, nmsn and 2 more
5. linrunzheng commented on Apr 14, 2022

   

   linrunzheng

   on Apr 14, 2022

   Last edited by linrunzheng

   More actions

   const liArr = $('ul').innerHTML.trim().split(/\s+/);
   
   [liArr[0], liArr[2]] = [liArr[2], liArr[0]];
   
   $('ul').innerHTML = liArr.join('');
   
   
   
6. yvonneit commented on Mar 31, 2023

   

   yvonneit

   on Mar 31, 2023

   Last edited by yvonneit

   More actions

   使用JS实现：

   // 获取ul元素节点
   const ul = document.querySelector('ul');
   // 获取li元素子节点
   const li1 = ul.children[0];
   const li3 = ul.children[2];
   // 将li3插入到li1之前，实现两个元素的位置交换
   ul.insertBefore(li3, li1);
   

   insertBefore() 是DOM API中的一个方法，用于将一个节点插入到指定节点之前。它接受两个参数：要插入的节点和参照节点。

   如果参照节点是 null，则相当于 appendChild() 方法，将节点插入到父节点的最后一项。需要注意的是，一旦在 DOM 中移动了一个节点，它的所有事件监听器和数据都将被保留。

   不使用JS，只使用CSS实现：

   ul {
     display: flex;
     flex-direction: column;
   }
   
   li:nth-child(1) {
     order: 3;
   }
   
   li:nth-child(3) {
     order: 1;
   }
   

   order 是 CSS 中 flex 布局的一个属性，用于指定弹性子元素的排列顺序。它可以接受一个整数值，默认为 0。

   order 的工作原理是将所有弹性子元素按照它们的 order 属性进行排序（从小到大）。如果两个元素的 order 属性相等，则按照它们在文档流中出现的顺序进行排序。需要注意的是，order 只改变元素的显示顺序，不影响 DOM 结构。
7. imondo commented on Mar 31, 2023

   

   imondo

   on Mar 31, 2023 via email

   More actions

   这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。
8. jacksmas commented on Apr 28, 2023

   

   jacksmas

   on Apr 28, 2023

   More actions

   使用JS实现：

   const ul = document.querySelector('ul');
   const first = ul.firstChild;
   const third = first.nextElementSibling.nextElementSibling;
   ul.insertBefore(third, first);
   

   不使用JS，只使用CSS实现：

   ul li:first-child {
     order: 3;
   }
   ul li:nth-child(3) {
     order: 1;
   }
   

   需要注意的是，这种方式只会改变元素在视觉上的位置，不会对DOM结构产生任何影响。另外，order属性只在flex布局下生效。``
9. xingbaoliang commented on May 26, 2023

   

   xingbaoliang

   on May 26, 2023 via email

   More actions

   gpt搜的吧 jacksmas ***@***.***> 于2023年4月28日周五 15:05写道：

   …

   使用JS实现： const ul = document.querySelector('ul'); const first = ul.firstChild; const third = first.nextElementSibling.nextElementSibling; ul.insertBefore(third, first); 不使用JS，只使用CSS实现： ul li:first-child { order: 3; } ul li:nth-child(3) { order: 1; } 需要注意的是，这种方式只会改变元素在视觉上的位置，不会对DOM结构产生任何影响。另外，order属性只在flex布局下生效。`` — Reply to this email directly, view it on GitHub <#55 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGVHFFKZE2FVEOABEFK4QX3XDNTZZANCNFSM5TFAPAJQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>
10. imondo commented on May 26, 2023

    

    imondo

    on May 26, 2023 via email

    More actions

    这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。