将 JavaScript 'this' 转换为 jQuery '$(this)'
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8801099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting JavaScript 'this' to jQuery '$(this)'
提问by Mayank
Please have a look at the following code:
请看下面的代码：
<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>
The function test receives target (li node) as an argument.
函数 test 接收目标（li 节点）作为参数。
Now, can I somehow convert this variable to jQuery $(this)or $(e.target)or any other jQuery variable to so that I could traverse the document using the jQuery way?
现在，我能否以某种方式将此变量转换为 jQuery$(this)或$(e.target)任何其他 jQuery 变量，以便我可以使用 jQuery 方式遍历文档？
回答by Tadeck
Converting DOM element to jQuery object
将 DOM 元素转换为 jQuery 对象
To convert DOM element to jQuery objectyou do the following:
要将DOM 元素转换为 jQuery 对象，请执行以下操作：
var jquery_object = jQuery(dom_element);
So, in your example it will be $(this)or $(event.target)- depending on whether you want current element or the element that actually fired the event (in your case they are the same, unless event will be fired by some descendant element).
因此，在您的示例中，它将是$(this)或$(event.target)- 取决于您是想要当前元素还是实际触发事件的元素（在您的情况下，它们是相同的，除非事件将由某个后代元素触发）。
Converting jQuery object to DOM element
将 jQuery 对象转换为 DOM 元素
To convert jQuery object to DOM element, you can simply treat jQueryobject as array or use its get()method like that:
要将jQuery 对象转换为 DOM 元素，您可以简单地将jQuery对象视为数组或使用其get()方法如下：
var dom_element = jquery_object[0];
or
或者
var dom_element = jquery_object.get(0);
The above will return first object stored in the jQuery object - if there is only one, there should be no problems (if there are more, just change 0into other index to get appropriate element, or just omit the argument for get()to retrieve all the elements as array).
上面将返回存储在 jQuery 对象中的第一个对象 - 如果只有一个，应该没有问题（如果有更多，只需更改0为其他索引以获得适当的元素，或者只需省略get()检索所有元素的参数作为数组）。
Your code changed to use jQuery
您的代码更改为使用 jQuery
Your code could look like this (if you insist on using hard-to-maintain event attributes):
您的代码可能如下所示（如果您坚持使用难以维护的事件属性）：
<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>
except in this case using jQuery is completely uselessand you can just operate directly on DOM elements, converting them to jQuery when needed :)
除了在这种情况下使用 jQuery 完全没用，你可以直接操作 DOM 元素，在需要时将它们转换为 jQuery :)
Your solution changed to bind events outside <body>
您的解决方案更改为在外部绑定事件 <body>
Your code using jQuery for binding events in jQuery 1.7+ could look like this:
您在 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>
See the above in action here: jsfiddle.net/tadeck/2PqPP/
在这里查看上面的操作：jsfiddle.net/tadeck/2PqPP/
回答by Sagar Patil
Try this:
试试这个：
$(document).ready(function(){
$('ul li').click(function(){
alert($(this).index());
});
});
If you want to read over all the elements in the list you can use:
如果要阅读列表中的所有元素，可以使用：
$(document).ready(function(){
$('ul li').each(function(){
alert($(this).index());
});
)};
Hope this helps.
希望这可以帮助。
回答by Mandeep Pasbola
Try this
试试这个
<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>
