Converting JavaScript 'this' to jQuery '$(this)'

房东的猫 提交于 2019-12-18 21:14:56

问题


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.

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?


回答1:


Converting DOM element to jQuery object

To convert DOM element to jQuery object you do the following:

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).

Converting jQuery object to DOM element

To convert jQuery object to DOM element, you can simply treat jQuery object as array or use its get() method like that:

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 0 into other index to get appropriate element, or just omit the argument for get() to retrieve all the elements as array).

Your code changed to use 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 useless and you can just operate directly on DOM elements, converting them to jQuery when needed :)

Your solution changed to bind events outside <body>

Your code using jQuery for binding events in jQuery 1.7+ could look like 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(){
        $('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/




回答2:


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.




回答3:


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>


来源:https://stackoverflow.com/questions/8801099/converting-javascript-this-to-jquery-this

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!