【jQuery】親ブロック内にて appendTo() を実行したい

Question

###前提・実現したいこと
同じ class のブロックがいくつかあり、その中に子要素 ul がある。
また、ul からはみ出した li が1つだけある。
このはみ出した li を、親ブロック内の ul 最後に移動させたい。

###発生している問題・エラーメッセージ
this の使い方が不得手で上手くいきません。

###該当のソースコード

<section class="block">
<h2>見出しタイトル</h2>
<ul>
	<li>ダミーテキスト</li>
	<li>ダミーテキスト</li>
	<li>ダミーテキスト</li>
</ul>
<li class="list"><a href="">リンク</a></li>
</section>

<section class="block">
<h2>見出しタイトル</h2>
<ul>
	<li>ダミーテキスト</li>
	<li>ダミーテキスト</li>
	<li>ダミーテキスト</li>
</ul>
</section>

$(".block .list").appendTo($(this).prev("ul"));

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery バージョンは 2.2.0 です。

Answer 1

appendToに渡した$(this)は$('.block .list)ではありません。
そのため

    $(".block .list").appendTo($(".block .list").prev("ul"));

とするだけで動くはずです。
ただ、もう少し厳密に書くなら（今回の例題なら）.children()を使って取得したほうがいいかなとも思います。
（本来liが飛び出している時点でHtml的にはおかしいですが）

var trg = $('.block').children('.list');
trg.appendTo(trg.prev('ul'));

のような感じかなと。

Comments

[退会済みユーザー]

確かに this は .block .list ではありませんね。
ご指摘頂いて気づきました…。
children を使ったやり方も納得いたしました。

早々にご返答くださりありがとうございました。

[unau]

横から失礼します。
.children() を使わず $('.block>.list') でもアリですか。

[manabufukai]

Re: KEITA_HIRAIさん
とんでもないです。このコードはあくまでも、この質問の例題に対する一つの解でしかありません。
実用的に使おうとするならばunauさんの回答をよくご覧になられたほうが良いです。

[manabufukai]

Re: unauさん
$('.block>.list') でも全然問題は無いと思います。
一応.childrenのほうが若干処理が早い、という程度なので…

[unau]

あ、そうなんですね。勉強になりました。ありがとうございます。

[manabufukai]

とんでもないです、基本としてはcssセレクタでネイティブのJavaScriptでは取得できない記述は基本遅めになるようです。
（といってもchildlenとの差は体感できるレベルでもないと思いますが…実際childrenもfindより遅いですし$('.block .list'の記述のほうがfindより高速だったりします)）
ただ、ブラウザのJavaScriptエンジンの進化でこのあたりの速度差などは結構変動していたりもするので、よほどの差がない限りは意識しなくても良いかもしれません。

Answer 2

this について正確に書こうとすると長くなりますので、とりあえず、jQurery を使う上では、「イベントハンドラの中でイベントが発生した DOM 要素にバインドされる」というのと、「each() や map() のコールバックの中で各 DOM 要素にバインドされる」というのを覚えておけばよいかと思います（どちらもコールバックの中で DOM 要素にバインドされていますね)。

$('#button').on('click', function() { /* ここでの this はクリックされた DOM 要素 */ });
$('#button').each(function() { /* ここでの this はラップ集合に含まれる各 DOM 要素 */ });

これ以外の this については、どのようにコードを書いているかによって変わってきます。

おそらく、やりたいと思われていることは、次のようにすればよいかと思います。

  $('.block .list').each(function() {
    var $li = $(this);
    $li.appendTo($li.prev('ul'));
  });

$('.block .list') に該当する li は複数ある場合があり、それぞれの親に appendTo() する必要がありますので、each() で一つずつ処理する必要がある、とお考えください。

Comments

[退会済みユーザー]

うわぁ、ご丁寧にありがとうございます～。
とても勉強になりました。

[unau]

manabufukai さんのやり方は知らなかったので、私も勉強になりました。
よい質問をあげてくださってありがとうございます。

[manabufukai]

To: unauさん
おっしゃる通り、本来使う場合ならeach()使うべきですよね…
「そこまでの説明はいいか…」と、思ってしまった自分を省みます。。

[manabufukai]

To: unau さん
以前.children() と $('.block>.list')の速度差について申しましたが
申し訳ないです、誤りでした！
どうやら今は.children()より $('.block>.list')のほうが早いようです…（しかもchildrenの倍ほど早くなってました。。）

現在は（セレクタそのものの指定はシンプルにしつつ）cssライクな記述にしたほうがパフォーマンスが上がるようです。（※ただし擬似クラスは相変わらず低速）
Ex $('#foo bar') $('#foo baz') $('.qux > quux > foobar') のような

[unau]

To: manabufukai さん
document.querySelectorAll() が使えるようになったから、とか関係あるんでしょうか。昔はこんな便利メソッドなかったし。