なぜ以前に初期化されたhtml要素の変数でJQueryを使用しようとすると、未定義になりますか？

Question

私はあなたがセレクタをどうのように変数名を書き込むことによって、以前に初期化要素を使用することができますjQueryのドキュメント（https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element/）で読む：

$(element) 

しかし、私が呼び出す関数から、そうしようとしたときにボタンを押すと、 'undefined'が返されます。

これは私がより制御された環境でこれをテストするためにやったサンプルコードです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <button class="btn btn-block btn-primary" onclick="jquery(this)">JQuery</button> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <button class="btn btn-block btn-info" onclick="normaljs(this)">normalJs</button> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <button class="btn btn-block btn-danger" onclick="basicTest()">basicTest</button> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <button class="btn btn-block btn-info" id="empty">dynamicTest</button> 
 
     </div> 
 
    </div> 
 
</div> 
 
<script> 
 
    function jquery(caller){ 
 
     var element = $(caller).parent(); 
 
     alert("Tag name: " + element.tagName); 
 
    } 
 

 
    function normaljs(caller){ 
 
     var element = caller.parentElement; 
 
     alert("Tag name: "+ element.tagName); 
 
    } 
 

 
    function basicTest(){ 
 
     alert("This is a basic test"); 
 
    } 
 

 
    $("#empty").click(function(){ 
 
     alert("Tag name: " + $(this).tagName); 
 
     alert("Tag name: " + this.tagName); 
 
    }); 
 
</script>

私が何か間違ったことをやっていますか？

Answer 1

、あなただけのため、DOMのプロパティとメソッドは、もうそれで通常の方法では動作しません、jQueryオブジェクトにDOM要素を「変換」が、あなたの場合jQueryのを使用してtagNameをを取得したい、そしてprop()はどうなる：

function jquery(caller){ 
    var element = $(caller).parent(); 
    alert("Tag name: " + element.prop("tagName")); 
} 

Answer 2

$(caller).parent()はjQueryオブジェクトを返しますが、tagNameはDOMプロパティであり、jQueryプロパティではありません（ほとんどすべてが関数です）。 jQueryオブジェクトに含まれるDOM要素を取得するには、get()関数または配列インデックスを使用できます。 $(caller)ことで

function jquery(caller) { 
 
    var element = $(caller).parent()[0]; 
 
    alert("Tag name: " + element.tagName); 
 
} 
 

 
function normaljs(caller) { 
 
    var element = caller.parentElement; 
 
    alert("Tag name: " + element.tagName); 
 
} 
 

 
function basicTest() { 
 
    alert("This is a basic test"); 
 
} 
 

 
$("#empty").click(function() { 
 
    alert("Tag name: " + $(this).get(0).tagName); 
 
    alert("Tag name: " + this.tagName); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <button class="btn btn-block btn-primary" onclick="jquery(this)">JQuery</button> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <button class="btn btn-block btn-info" onclick="normaljs(this)">normalJs</button> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <button class="btn btn-block btn-danger" onclick="basicTest()">basicTest</button> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <button class="btn btn-block btn-info" id="empty">dynamicTest</button> 
 
    </div> 
 
    </div> 
 
</div>