【jQuery】thisを使った「直接書いたコード」と「関数に切り出したコード」で処理が変わるのはなぜ？

この投稿は前回の続きになります。
【jQuery】labelの中の文字列だけを変更したい
 【jQuery】引数にthisを渡せない

今回以下のようなコードを書いて、「緑のボックスをクリックすると、ピンクのボックスの文字が変わり、またラベルの中のテキストノードだけを変更する」処理を実装していました。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
7  <style>
8    .aaa {
9      width: 150px;
10      height: 50px;
11      background-color: #EFE;
12      border: solid 1px #CCC;
13      position: absolute;
14    }
15
16    .ddd {
17      width: 150px;
18      height: 50px;
19      background-color: pink;
20      border: solid 1px pink;
21      position: absolute;
22    }
23  </style>
24</head>
25
26<body>
27  <label class="aaa">
28    <span class="bbb"></span>
29    <input type="hidden" class="ccc">りんご
30  </label>
31  <br>
32  <br>
33  <br>
34  <label class="aaa">
35    <span class="bbb"></span>
36    <input type="hidden" class="ccc">いちご
37  </label>
38  <br>
39  <br>
40  <br>
41  <label class="aaa">
42    <span class="bbb"></span>
43    <input type="hidden" class="ccc">ぶどう
44  </label>
45  <br>
46  <br>
47  <br>
48  <label class="ddd">
49    <span class="bbb"></span>
50    <input type="hidden" class="ccc">りんご
51  </label>
52  <script>
53    $(function() {
54      $(".aaa").on("click", function() {
55        //labelの中の文字列だけを変更する処理。
56        //直接書いたコード
57        // var txt = $(this).text();
58        // $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }).remove();
59        // $(".ddd").append(txt);
60        test(this);
61      });
62    });
63
64    //関数に切り出すとおかしくなる
65    function test(_this){
66      var txt = $(_this).text();
67      $(".ddd").contents().filter(function(){ return _this.nodeType === _this.TEXT_NODE }).remove();  //文字がどんどん追加される。removeできていない。
68      // $(".ddd").contents().filter(function(i,e){ return e.nodeType === e.TEXT_NODE }).remove();  //できる。
69      // $(".ddd").contents().filter(function(e){ return e.nodeType === e.TEXT_NODE }).remove(); // 「i」をなくすと、spanタグやinputタグも消えてしまう
70      // $(".ddd").contents().filter(function(e){ return e.nodeType === Node.TEXT_NODE }).remove(); // 「i」をなくし、Node.TEXT_NODEにすると、文字がどんどん追加される。removeできていない。
71
72      $(".ddd").append(txt);
73    }
74  </script>
75</body>
76
77</html>
78

ただ「直接書いたコード」だと何ら問題ないのですが、「this」を引数に渡すといろいろと処理が変わっていしまいます。
そこでいくつか質問があります。

１つ目
そもそも関数の引数に「this」を渡したい時
直接書いたコードのまま関数に切り出せる場合と切り出せない場合の違いはどのようなときか？
「切り出せない場合」とは、「直接書いたコードを一部変更しなくてはいけない」場合のことです。
今回の場合は、thisをそのまま使うやり方はダメで、function(i,e)のようにしてeオブジェクトを使わなければいけない理由は何でしょうか？

２つ目
function(i,e)の「i」を消すと、spanタグやinputタグも消えてしまうのはなぜでしょうか？
「i」について調べて、i番目などを指すときに使うものだと思っています。
またこのコードで「i」を使っていないのに影響していることが不思議です。

３つ目
function(i,e)の「i」を消し、「=== e.TEXT_NODE })」のときと「=== Node.TEXT_NODE })」のときで処理の内容が変わるのはなぜでしょうか？

「=== e.TEXT_NODE })」のとき
・spanタグやinputタグも消えてしまう

「=== Node.TEXT_NODE })」のとき
・removeされず、文字がどんどんappendされてしまう

このどれかだけでもいいので質問に答えていただけると助かります。

行動規範の内容に同意します

回答3件

ベストアンサー

1番目

filterのfunction内のthisはfilterでループされる要素を示します。
なので、関数内のfilterの中を_thisからthisに変えるとちゃんと動きます。

公式でも、

A function used as a test for each element in the set. this is the current DOM element.

functionはそのセットの中のエレメントの各々をテストするために使います。thisはそのカレントDOMエレメントを示します。

と書かれています。

2番目

function(item,element)のitemを消したらfunction(element)にはなりません。
function(item)になります。引数の名前ではなく順序が大事です。

3番目

これも2番目に共通です。
int.TEXT_NODEという定数は存在しないので、挙動が変わります。
Node.TEXT_NODEと、funciton(i,e)のe.TEXT_NODEは同じ値を示します。

投稿2016/03/25 00:18

shi_ue

総合スコア4437

k499778

2016/03/25 07:02

回答ありがとうございます！ functionに関してもう一度勉強し直します。

行動規範の内容に同意します

thisは、functionの呼び出し元を指します。
つまり、
clickのコールバックで呼ばれるfunction内のthisと
filterのコールバックで呼ばれるfunction内のthisはそれぞれ別物を指します。
ですが、現在のソースでは _thisを使って全て同じ参照としているので挙動が違っています。(_this = clickのコールバックのthis)

filter内で参照するのをthisにすれば想定どおりの動きになると思います。

var _this = null;
$(".aaa").on("click", function() {
    this; // clickされた.aaaの参照

    _this = this;

    $(".ddd").contents().filter(function(){
        this; // .dddに含まれる各要素の参照

        _this; // こっちは、clickされた.aaaの参照
    }).remove();
});

投稿2016/03/25 00:16

rkojima

総合スコア421

k499778

2016/03/25 07:02

回答ありがとうございます！ functionの使い方をもう一度勉強したみます。

行動規範の内容に同意します

以下の直接書いた場合の1行目のthisと2行目のthisは違うthisです。

JavaScript
1// var txt = $(this).text();
2// $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }

なので関数に切り出す場合はこうするべきでは無いかと思います。

JavaScript
1function test(_this){
2  var txt = $(_this).text();
3  $(".ddd").contents().filter(function(){ return this.nodeType === this.TEXT_NODE }).remove();
4
5  $(".ddd").append(txt);
6}

以下については、あなたはiを無くしたつもりかもしれませんが、実際になくなっているのはe、つまり2番目の引数の方です。eのつもりでiを使っているのですからそれはおかしくなるでしょう。

JavaScript
1// $(".ddd").contents().filter(function(e){ return e.nodeType === e.TEXT_NODE }).remove(); 
2// 「i」をなくすと、spanタグやinputタグも消えてしまう
3
4// $(".ddd").contents().filter(function(e){ return e.nodeType === Node.TEXT_NODE }).remove(); 
5// 「i」をなくし、Node.TEXT_NODEにすると、文字がどんどん追加される。removeできていない。
6