2016-06-13 11 views
1

私はこの問題を何度も経験しましたが、最初は無視しようとしました。Jquery - Jqueryオブジェクトに余分な[0]を追加する必要があります

HTML::

<div class="col-sm-10"> 
    <select class="form-control input-sm" id="my_select" name="contracting_party_legal_entity"> 
    </select> 
</div> 

は今、私はオプションで、プログラムの私の選択を移入するために、たとえば、欲しい 私はselect要素を持っています。 これを達成するには$('#my_select').appendChild($option)を使用する必要がありますが、そうは思われません。 $('#my_select')[0].appendChild($option)と書かなければ、エラーappendChild is not a functionが返されます。なぜこの余剰分を使う必要があるのですか?私の構文が間違っていますか?

+2

'appendChild'はネイティブメソッドですが、jQueryオブジェクトはそれをサポートしていません。 'append'は最も近いjQueryメソッドです。 – Teemu

答えて

3

$は、jQuery関数です。一致するすべての要素の配列を返します。

したがって、特定の要素を選択するには、配列のインデックスを選択する必要があります。

$('#my_select').get(0).appendChild($option)appendChildはバニラのjavascript関数ですが、これはjqueryオブジェクトにない要素で動作します。 jQuery の追加関数を試してください。 jQueryのの

例は、機能を追加します。

$("#test").append("<option>hello</option>")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="test"> 
 
    <option>Select box</select> 
 
</select>

+0

完全に満足しました。とった。したがって、プレーンバニラJS関数getElementByIdで要素を取得すると、インデックスなしでappendChildを使用できますか? –

+0

はい、それは正しいです:) –

2

appendChildは、ネイティブのJavaScriptです。 $(...)は、jQuery collectionを返すjQuery関数です。

jQueryの代わりに使用することができappend() methodに建てられ、独自のを持っています

$(...).append(...); 

.append()方法としてそれを挿入するには(jQueryのコレクション内の各要素の最後の子として指定されたコンテンツを挿入最初の子、.prepend()を使用してください)。

関連する問題