回答編集履歴

DOM API版のjsfiddleサンプルを追加

2017/06/22 13:02

投稿

think49

スコア18162

test CHANGED Viewed

@@ -136,6 +136,8 @@
 - [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/5/)
+- [要素ノードを入れ替える (DOM API ver) - JSFiddle](https://jsfiddle.net/t6ds8Ljg/6/)
 - [swap-node.js: 2つのノードの位置を入れ替えます - GitHub](https://gist.github.com/think49/4cd2cfc82f308c7b5d696dc2a50af3d4)
@@ -264,6 +266,8 @@
 - 2017/06/21 10:48 swap-node.js を更新(jsfiddleのリンク先を更新)
+- 2017/06/22 22:02 DOM API版のjsfiddleサンプルを追加
 Re: gomatan1258 さん

swap-node\.js を更新\(jsfiddleのリンク先を更新\)

2017/06/22 13:02

投稿

think49

スコア18162

test CHANGED Viewed

@@ -134,7 +134,7 @@
-- [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/4/)
+- [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/5/)
 - [swap-node.js: 2つのノードの位置を入れ替えます - GitHub](https://gist.github.com/think49/4cd2cfc82f308c7b5d696dc2a50af3d4)
@@ -210,7 +210,7 @@
-<script src="swap-node-1.0.1.js"></script>
+<script src="swap-node-1.0.2.js"></script>
 <script>
@@ -262,6 +262,8 @@
 - 2017/06/20 16:40 「コード1の問題点」「コード2 (汎用型)」を追記
+- 2017/06/21 10:48 swap-node.js を更新(jsfiddleのリンク先を更新)
 Re: gomatan1258 さん

「コード1の問題点」「コード2 \(汎用型\)」を追記

2017/06/21 01:48

投稿

think49

スコア18162

test CHANGED Viewed

@@ -16,7 +16,7 @@
-### コード
+### コード1 (jQuery+DOM混合型)
@@ -98,12 +98,170 @@
+### コード1の問題点
+コード1にはli要素間のホワイトスペースノードを保持しないという問題がありました。
+li要素のdisplayプロパティを変更していなければ問題になりませんが、 `display: inline` や `display: inline-block` を適用していた場合、ホワイトスペースノードによって開けられていた余白がつめられてしまう不具合を誘発させる事になります。
+- [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/2/)
+上記リンク先で要素を入れ替える事で余白がつめられる事象を確認できます。
+これは jQuery API が基本的にテキストノードを読み飛ばして要素ノードのみを対象に取っている事に原因があります。
+対処療法的には `.next()[0]` を `nextSibling` に修正してやれば回避できる問題ですが、**jQuery API が要素ノードのみを扱う事を基本**としている事にも問題があると思います。
+例えば、`.next()`, `.before()`, `.after()` を使うだけでこの問題が発生し、jQuery ではテキストノードとテキストノードの間に要素ノードを挿入することが出来ません。
+従って、「ノードの入れ替え処理は DOM のみで書いた方が良い」という結論に落ち着きます。
+### コード2 (汎用型)
+swap-node.js は下記リンク先(GitHub)からDLして下さい。
+swap-node.js の使い方、制約はGitHubにまとめたのでそちらを参照して下さい。
+- [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/4/)
+- [swap-node.js: 2つのノードの位置を入れ替えます - GitHub](https://gist.github.com/think49/4cd2cfc82f308c7b5d696dc2a50af3d4)
+```HTML
+<style>
+.change[aria-selected="true"] {
+  color: black;
+  background-color: #efe;
+  border: solid 1px #3a3;
+}
+.change {
+  margin: 0.3em 0;
+  color: black;
+  background-color: #ddd;
+  border: solid 1px #999;
+  padding: 0.2em 0.8em;
+}
+#test2 .change {
+  display: inline-block;
+}
+</style>
+<body>
+<ul id="test1">
+  <li class="change">1a</li>
+  <li class="change">1b</li>
+  <li class="change">1c</li>
+  <li class="change">1d</li>
+</ul>
+<ul id="test2">
+  <li class="change">2a</li>
+  <li class="change">2b</li>
+  <li class="change">2c</li>
+  <li class="change">2d</li>
+</ul>
+<script src="swap-node-1.0.1.js"></script>
+<script>
+'use strict';
+jQuery('.change').on('click', function (event) {
+  var currentTarget = event.currentTarget;
+  if (currentTarget.getAttribute('aria-selected') === 'true') {
+    currentTarget.setAttribute('aria-selected', 'false');
+  } else {
+    var li = currentTarget.ownerDocument.querySelector('.change[aria-selected="true"]');
+    if (li) {
+      swapNode(currentTarget, li);
+      li.setAttribute('aria-selected', 'false');
+    } else {
+      currentTarget.setAttribute('aria-selected', 'true');
+    }
+  }
+});
+</script>
+```
 ### 更新履歴
 - 2017/06/19 12:49 2回目のクリックで1回目にクリックした次の要素を選択すると要素ご消失する不具合修正
+- 2017/06/20 16:40 「コード1の問題点」「コード2 (汎用型)」を追記
 Re: gomatan1258 さん

2回目のクリックで1回目にクリックした次の要素を選択すると要素ご消失する不具合修正

2017/06/20 07:40

投稿

think49

スコア18162

test CHANGED Viewed

@@ -1,3 +1,7 @@
+### ノードの参照を保持する
 私の知識不足かもしれませんが、jQuery API でやろうとするといろいろと上手くいかないですね。
 次の点に注意してコードを書いてみました。
@@ -10,11 +14,13 @@
 `.replaceWith()` を使うと、`jQuery('.change').on('click')` すると同じ要素に続けてクリックしても発火しなくなりました。
-サンプルコードは下記参照。
+### コード
-- [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/)
+- [要素ノードを入れ替える - JSFiddle](https://jsfiddle.net/t6ds8Ljg/1/)
@@ -58,9 +64,21 @@
       var next = li.next()[0];
-      ul.replaceChild(li[0], currentTarget[0]);
+      if (next === currentTarget[0]) {
+        ul.insertBefore(currentTarget[0], li[0]);
+      } else {
+        ul.replaceChild(li[0], currentTarget[0]);
-      next ? ul.insertBefore(currentTarget[0], next) : ul.appendChild(currentTarget[0]);
+        next ? ul.insertBefore(currentTarget[0], next) : ul.appendChild(currentTarget[0]);
+      }
       li.attr('aria-selected', 'false');
@@ -80,4 +98,12 @@
+### 更新履歴
+- 2017/06/19 12:49 2回目のクリックで1回目にクリックした次の要素を選択すると要素ご消失する不具合修正
 Re: gomatan1258 さん

typo修正

2017/06/19 03:49

投稿

think49

スコア18162

test CHANGED Viewed

@@ -8,7 +8,7 @@
-`.replaceWith()` を使うと、`jQuery('.change').on('click')` すると同じ要素に続けてクリくしても発火しなくなりました。
+`.replaceWith()` を使うと、`jQuery('.change').on('click')` すると同じ要素に続けてクリックしても発火しなくなりました。
 サンプルコードは下記参照。