Question

106

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

rated 0 times [ 112] [ 6] / answers: 1 / hits: 20358 / 13 Years ago, tue, january 10, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arielle

Add To Favorites

Follow

Total Points: 373

Total Questions: 105

Total Answers: 96

Location: Azerbaijan

Member since Fri, May 12, 2023

1 Year ago

answered 13 Years ago byrondonavanc · Accepted Answer

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/