Please wait for 15 seconds...

Friday 18 January 2013



One day I was wondering if there is a way that I can apply a jquery method/function to a group of divs, whose selectors are different, or other tags like <span> or <a> etc. at the same time. Well thanks to jQuery which is very flexible and very easy to extend. Now let's do some exercise for it and see how it works.

Suppose you have a parent div and its hierarchy is same as below and you want to title value of few specific tags, then follow below instructions.



HTML


<div id="div_main">
<div>
<h1 title="Header">Header</h1>
<h6 title="Description">Description</h6>
</div>
<div>
<a id="anchor_one" title="Anchor One">Anchor One</a>
<a  id="anchor_two" title="Anchor Two">Anchor Two</a>
</div>
</div>

Now attach an event listener with h1, h6, #anchor_one, #anchor_two so if a user clicks on it then jQuery can fetch its title and alert them.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('h1, h6, #anchor_one, #anchor_two').live("click", function(){
var title = $(this).attr('title');
alert(title);
});
});
</script>

I hope it helped you to solve your problem.Thanks for reading this tutorial.

Posted by Atul

0 comments:

Post a Comment

Techsirius on Facebook