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

javascript jquery html traversal

19,153

Solution 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];

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/

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

19,153

Author by

Mayank

Updated on June 15, 2022

Comments

Mayank almost 2 years

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?

Mayank over 12 years

Awesome. Thanks a lot :) script src=http://ajax... also need to be fixed from my side
Tadeck over 12 years

@Mayank: Thanks! :) Why you think <script src="//ajax... should be changed? If you start your URL with //, the browser will prepend it with current URL like "http:" or "https:".
Mayank over 12 years

i was testing this locally, I mean by creating and HTML file and open it in browser without any server running. May thats the reason I need to start it with http. It was showing me the error $ not defined. After I added http it worked.
Tadeck over 12 years

@Mayank: It did not work locally probably because you used file://... instead of eg. http://localhost/... - which, in case of links' URLs beginning with // makes big difference. "//" when at the beginning of the link, treats the URL as having the same protocol part as the current request, so this is perfectly fine. Just use http:// for local requests (you can search the web on how to set up server on localhost, this is different topic). Good luck!
Vincent over 4 years

It's worth mentioning that var el = jQuery(element) won't break if you pass in a jQuery element. In other words, you don't have to check to see what kind of element it is before you convert it to a jQuery element.