Question

I’ve got HTML code that roughly looks like this:

<li id='someid-11'>  <img src='...' alt='alt' /> <h2><a href='somelink'> sometext </a>     <span><a class='editcontent' href='?action=editme'>Edit</a></span> </h2> <div id='11' class='content'>  <!-- // content goes here -->  <div class='bottom_of_entry'> </div>  </li> 

I’m using the a.editcontent to activate an edit-in-place method on div.content. My current selector looks like this

jQuery('a.editcontent').bind('click', (function(){     jQuery(this).parent('span').parent('h2').next('.content').trigger('edit'); } 

It works, but its ugly. There must be some better way to do that, right?

Answer 1

I recommended the Sprintstar Solution. but if you don’t like it, use this:

$('a.editcontent').click(function(){     $(this).parents('h2').next('.content').trigger('edit'); }); 

If you have more that one ‘h2’:

$('a.editcontent').click(function(){     $(this).parents('h2:first').next('.content').trigger('edit'); });