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

$(caller).parent()返回一个jQuery对象，但tagName是一个DOM属性，而不是jQuery属性（jQuery很少使用数据属性，几乎所有东西都是函数）。要获取jQuery对象中包含的DOM元素，可以使用get()函数或数组索引。

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>

Answer 2

按$(caller)，您只需转换＆＃34;将DOM元素转换为jQuery对象，因此，DOM属性和方法不再以正常方式工作，但是如果你想使用jQuery获取tagName，那么prop()会：

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

为什么在尝试在先前初始化的html元素变量上使用JQuery时，它返回undefined？

2 个答案: