3

this以下の 3 つのキーワードの使用方法が機能しない理由を理解しようとしています。

HTMLは次のとおりです。

<ul>
    <li><a id="i1" href="#">Item 1</a></li>
    <li><a id="i2" href="#">Item 2</a></li>
    <li><a id="i3" href="#">Item 3</a></li>
</ul>

そして、ここにjQueryがあります：

// Output a list of href ids and append them to the ul element
$('ul li a').each(function() {
    $('<li>' + this.id + '</li>').appendTo('ul') // this works
    // $(this.id).appendTo('ul') // this doesn't work
    // (this.id).appendTo('ul') // this doesn't work
    // $(this).attr('id').appendTo('ul') // this doesn't work
});

ここにもjsFiddleがあります

コメントアウトされた 3 つのコード スニペットがどれも機能しない理由を誰か説明できますか?

4

7 に答える 7

1

$(this.id).appendTo('ul')と同じ$("i1").appendTo('ul')です。タグ名「i1」を持つすべての要素を検索します。何も見つからないため、これは何もしません。

(this.id).appendTo("ul")は と同じです"i1".appendTo("ul")。そのようなメソッドは文字列に存在しません

コメントアウトされた 3 番目のスニペットは、2 番目とまったく同じ.appendToで、文字列に対してメソッドを呼び出します。

于 2012-10-24T12:22:46.707 に答える
1 
$(this.id).appendTo('ul') // this doesn't work

jQuery は、要素、要素の配列、または$()構造内の文字列セレクターを提供することを期待しているため、これは機能しません。i1which will not match any のような文字列セレクターを提供することで、appendToはどのオブジェクトを処理すべきかわかりません。

(this.id).appendTo('ul') // this doesn't work

によって返される値にはメソッドidがないため、これは機能しません。jQuery を呼び出すために here をappendTo使用していないことに注意してください。$

$(this).attr('id').appendTo('ul') // this doesn't work

によって返される文字列ではなく、オブジェクトappendToを追加するため、これは機能しません。liattr('id')

問題自体は、少し混乱しているように見えるという事実から生じているようですappendTo()。基本的には、文字列値ではなく要素を追加します。詳細については、APIをお読みください。

于 2012-10-24T12:22:52.317 に答える
0

thiseach各反復内で使用する jQuery オブジェクトの基礎となる DOM 要素を参照します。

あなたの例では、次のコード：

$("ul li a").each(function() {
    console.log(this.href);
});

次と同じように機能します。

console.log(document.getElementById("i1").href);
console.log(document.getElementById("i2").href);
console.log(document.getElementById("i3").href);
于 2012-10-24T12:21:16.193 に答える
0 
// $(this.id).appendTo('ul') // this doesn't work
$('#'+this.id).appendTo('ul') // this will work

#ID セレクターを使用するには、プレフィックスを追加する必要があります。

// (this.id).appendTo('ul') // this doesn't work

(this.id) jQuery オブジェクトではないため、.appendTo未定義です。

// $(this).attr('id').appendTo('ul') // this doesn't work

$(this).attr('id')は jQuery オブジェクトではないため、.appendTo未定義です。

于 2012-10-24T12:21:34.597 に答える
0
  • $(this.id)ID (文字列) 値を jQuery セレクターとして使用しようとします。それはあなたが望むものではありません。
  • (this.id)と同じですthis.id- 括弧はここでグループ化されます。それらは関数呼び出しではありません。どちらの場合も、.appendTo文字列オブジェクトには機能がありませんthis.id。
  • の前の箇条書きとほとんど同じ問題です$(this).attr('id')。その式は、機能を持たない文字列に評価され.appendToます。

いずれの場合も、デバッガを使用して JavaScript エラー コンソールを確認する習慣を身に付ける必要があります。これは、#2 と #3 が問題を説明する非常に明白なエラーを出力するためです。

于 2012-10-24T12:21:55.940 に答える
0

個人的には、このインスタンスで「this」の使用を完全に避けた場合、コードはずっときれいになると思います。

http://jsfiddle.net/DZPnP/3/

$ul = $('#someULid');

$('ul li a').each(function( index, linkElement) {
    $linkElement = $(linkElement);
    $('<li>' + $linkElement.attr('id') + '</li>').appendTo( $ul );
});
于 2012-10-24T12:33:11.990 に答える
0 
// $(this).attr('id').appendTo('ul') // this doesn't work

.attr()実際のアイテムではなく値を返すため、機能しません。.find()代わりに使用してください！

// (this.id).appendTo('ul') // this doesn't work

this.idは有効な jquery アイテムではないため、機能しません。

したがって、IDを使用する場合は、使用する必要があります

$('#'+this.id).appendTo('ul')
于 2012-10-24T12:22:14.347 に答える