Menu
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?
870
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).
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).
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 :)
<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/
98
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
