将 JavaScript 'this' 转换为 jQuery '$(this)'答案

【问题标题】：Converting JavaScript 'this' to jQuery '$(this)'将 JavaScript 'this' 转换为 jQuery '$(this)'
【发布时间】：2012-01-10 09:37:58
【问题描述】：

请看下面的代码：

<HTML>
    <HEAD>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

        <SCRIPT type="text/javascript">
            function test(target) {     alert(target.nodeName); }
        </SCRIPT>
    </HEAD>

    <BODY>
        <DIV>
            <ul>
                <li onclick="test(this)">This is fair</li>
                <li onclick="test(this)">No its not</li>
                <li onclick="test(this)">Why not</li>
                <li onclick="test(this)">Becoz...</li>
            </ul>
        </DIV>
    </BODY>
</HTML>

函数测试接收目标（li节点）作为参数。

现在，我能否以某种方式将此变量转换为 jQuery $(this) 或 $(e.target) 或任何其他 jQuery 变量，以便我可以使用 jQuery 方式遍历文档？

【问题讨论】：

是的，正是您建议的方式：$(this) 或 $(e.target)
好吧，在这种情况下，它将是$(target)。 You can pass DOM elements to jQuery。就目前而言，在test 内部，this 将引用window，所以我认为将它传递给 jQuery 没有那么有用。当然你也可以直接传递jQuery对象：test($(this))。我还建议您使用 jQuery 绑定事件处理程序，而不是使用内联事件处理程序。

标签： javascript jquery html traversal

【解决方案1】：

将 DOM 元素转换为 jQuery 对象

要将 DOM 元素转换为 jQuery 对象，请执行以下操作：

var jquery_object = jQuery(dom_element);

因此，在您的示例中，它将是 $(this) 或 $(event.target) - 取决于您想要当前元素还是实际触发事件的元素（在您的情况下，它们是相同的，除非事件会被某些人触发后代元素）。

将 jQuery 对象转换为 DOM 元素

要将 jQuery 对象转换为 DOM 元素，您可以简单地将 jQuery 对象视为数组或使用它的 get() 方法：

var dom_element = jquery_object[0];

或

var dom_element = jquery_object.get(0);

上面将返回存储在jQuery对象中的第一个对象-如果只有一个，应该没有问题（如果有更多，只需将0更改为其他索引以获取适当的元素，或者省略参数get() 将所有元素作为数组检索）。

您的代码更改为使用`jQuery`

您的代码可能如下所示（如果您坚持使用难以维护的事件属性）：

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
    function test(target) {     alert(target.get(0).nodeName); }
</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li onclick="test($(this))">This is fair</li>
        <li onclick="test($(this))">No its not</li>
        <li onclick="test($(this))">Why not</li>
        <li onclick="test($(this))">Becoz...</li>
    </ul> </DIV>

</BODY>

除了在这种情况下使用jQuery完全没用，你可以直接对DOM元素进行操作，在需要时将它们转换为jQuery:)

您的解决方案更改为绑定`<body>` 之外的事件

您在 jQuery 1.7+ 中使用 jQuery 绑定事件的代码可能如下所示：

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
    $(function(){
        $('li').on('click', function(event){
            alert(event.target.nodeName);
        });
    });
</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li>This is fair</li>
        <li>No its not</li>
        <li>Why not</li>
        <li>Becoz...</li>
    </ul> </DIV>

</BODY>

在此处查看上述操作：jsfiddle.net/tadeck/2PqPP/

【讨论】：

太棒了。非常感谢 :) script src=http://ajax... 也需要从我这边修复
@Mayank：谢谢！ :) 为什么你认为<script src="//ajax... 应该改变？如果您的 URL 以 // 开头，浏览器会在其前面加上当前 URL，例如“http:”或“https:”。
我在本地对此进行测试，我的意思是通过创建 HTML 文件并在没有任何服务器运行的情况下在浏览器中打开它。可能这就是我需要以 http 开头的原因。它向我显示了错误$ not defined。在我添加 http 之后它就起作用了。
@Mayank：它在本地不起作用可能是因为您使用了file://... 而不是例如。 http://localhost/... - 如果链接的 URL 以 // 开头，这会产生很大的不同。 “//”在链接开头时，将 URL 视为与当前请求具有相同的协议部分，所以这很好。只需将http:// 用于本地请求（您可以在网上搜索如何在localhost 上设置服务器，这是不同的主题）。祝你好运！
值得一提的是，如果你传入一个 jQuery 元素，var el = jQuery(element) 不会中断。换句话说，在将其转换为 jQuery 元素之前，您不必检查它是什么类型的元素。

【解决方案2】：

试试这个：

$(document).ready(function(){
   $('ul li').click(function(){
       alert($(this).index());
   });
});

如果您想阅读列表中的所有元素，您可以使用：

$(document).ready(function(){
    $('ul li').each(function(){
        alert($(this).index());
    });
)};

希望这会有所帮助。

【讨论】：

【解决方案3】：

试试这个

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">        
    $(function(){
    $('ul li').click(function(){
         alert($(this).html());
     })
    })

</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li>This is fair</li>
        <li>No its not</li>
        <li>Why not</li>
        <li>Becoz...</li>
    </ul> 
</DIV>

</BODY>

【讨论】：

将 DOM 元素转换为 jQuery 对象

将 jQuery 对象转换为 DOM 元素

您的代码更改为使用jQuery

您的解决方案更改为绑定&lt;body&gt; 之外的事件

您的代码更改为使用`jQuery`

您的解决方案更改为绑定`<body>` 之外的事件